/* ===========================================================================
                                GLOBAL SETTINGS 
   =========================================================================== */

@font-face {
    font-family: 'basier-circle-regular';
    src: url('fonts/basier_circle_regular-webfont.woff2') format('woff2'),
         url('fonts/basier_circle_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'basier-circle-medium';
    src: url('fonts/basier_circle_medium-webfont.woff2') format('woff2'),
         url('fonts/basier_circle_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'basier-circleregular-italic';
    src: url('fonts/basiercircle-regularitalic-webfont.eot');
    src: url('fonts/basiercircle-regularitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/basiercircle-regularitalic-webfont.woff2') format('woff2'),
         url('fonts/basiercircle-regularitalic-webfont.woff') format('woff'),
         url('fonts/basiercircle-regularitalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



:root {
    --background: black;
    --foreground: white;
    --customBlack: #1B1B1C;
    --thumbnail_background: white;    
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0; 
  -webkit-box-sizing: border-box; 
          box-sizing: border-box;
  scrollbar-width: none;
}

html::-webkit-scrollbar { width: 0 !important }
::-webkit-scrollbar {
    display: none;
}

html
{
    height: 100%;
    font-size: 62.5%;    
    background: var(--background);

    
}

main
{
    position: relative;
    height: 100vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    -webkit-scroll-snap-type: mandatory;
}

body
{
    
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'basier-circle-regular', sans-serif, Helvetica, Arial;
    
    color: var(--foreground);
    font-size: 25px;    
}

html,
body
{
    width: 100vw;
    height: 100vh;

    top: 0;
    left: 0;
    overflow: auto;
}

a
{
    text-decoration: none;
    color: var(--foreground);
    outline: none;
	cursor: pointer;
}

a:hover,
a:focus {
	outline: none;
}

a
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
img
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

i{
    font-family: 'basier-circleregular-italic';
    font-style: normal;
}

sup{
    font-size: 50%;
}

.no-cursor
{
    cursor: none;
}

::-ms-selection {color:#ff6464;background: transparent; }
::-moz-selection { color:#ff6464;background: transparent; }
::selection { color:#ff6464;background: transparent; }

/* ===========================================================================
                                LAZY LOADING 
   =========================================================================== */



.project-wrapper img
{       
    background-color: var(--thumbnail_background);
}


/* ===========================================================================
                                NAVIGATION 
   =========================================================================== */

#navigation__mobile
{
    display: none;
}

nav 
{
    position: fixed;
    background-color: transparent;
    z-index: 6;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem 2.5rem 0 2.5rem;
}

.nav-links 
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    
}

.nav-links li {
    list-style: none;
    margin-left: 5.5rem;
}

.nav-links a {
    color: var(--foreground);
    text-decoration: none;  
    font-size: calc(27px + 0 * ((100vw - 768px) / 1152));
}

.nav-links .nav-right a:after {
    content: ""; 
    display: block; 
    width: 0px; 
    border-bottom: 2px solid var(--foreground);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.nav-links .nav-right a:hover:after {
    width: 100%;
}

.nav-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.change-color
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
}

.change-color-button
{
    height: 16px;
    width: 16px;
    border-radius: 50%;
    pointer-events: none;
}

#change-color-right
{
    margin-left: 10px;
}

.change-color-border
{
    border: 1px solid var(--foreground);
}
.change-color-dark
{
    background-color: black;
}
.change-color-dark__border
{
    background-color: transparent;
    border: 2px solid black;
}
.change-color-light
{
    background-color: white;
}
.change-color-light__border
{
    background-color: transparent;
    border: 2px solid white;
}

.currentPage a:after {
    content: ""; 
    display: block; 
    width: 100% !important; 
    border-bottom: 2px solid var(--foreground);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}


.currentPage a:hover:after {
    content: ""; 
    display: block; 
    width: 0% !important; 
    border-bottom: 2px solid var(--foreground);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

/* -------------------- MOBILE MENU -------------------- */
.menu
{
    
    background-color: var(--foreground);

    display: -webkit-box;
    display: -ms-flexbox;
    display: none;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 33%;

    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
            
    padding: 2rem 2rem 1rem 2rem;
    z-index: 7000;

    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
    
    transition: transform 1s ease-in-out;
}

.menu_open
{
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
    
}

.menu div
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;

    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

    
.menu a 
{
    color: var(--background);
    font-size: 3rem;
}

.menu div:nth-child(1) a
{
    font-size: 1.8rem;
}

/* ===========================================================================
                                CURSOR 
   =========================================================================== */
.global-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	pointer-events: none;
	opacity: 0;
}

.global-cursor div {
	
	color: var(--foreground);
    text-decoration: none;  
    font-size: calc(21px + 0 * ((100vw - 768px) / 1152));
	position: absolute;
	top: 2px;
	left: 0;
	/* opacity: 0; */
}

/* ===========================================================================
                                HOMEPAGE 
   =========================================================================== */

/* -------------------- INTRO -------------------- */

main
{
    position: relative;
    background-color: transparent;
    z-index: 5;
}

#intro
{
    z-index: 4;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    background: white;
    text-align: center;
}

#intro svg
{
    width: calc(100% - 100px);
    
    bottom: 38px;
    left: 50%;

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    position: absolute;
}


/* -------------------- PROJECT SECTIONS -------------------- */

.project__title
{
    display: none;
}

.wrapper .project-wrapper 
{
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.carousel-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

.mouse-detect {
    position: absolute;
    top: 0;
    left: 0;
    height:100vh;
    width: 100%;

    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    z-index: 2;
}

.swipe-detect
{
    position: absolute;
    top: 0;
    left: 0;
    height:100vh;
    width: 100%;

    z-index: 156;
    
}

.carousel {
    height: 100%;
}

.img-container {
    height: 100%;
    
    display: -webkit-box;    
    display: -ms-flexbox;
    
    display: flex;
    -ms-flex-line-pack: center;
        align-content: center;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    position: relative;
    float: left;
}

.img-container img {
    
    height: 75%;
    max-height: 670px;
}

.project-wrapper
{
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.project__image
{
    display: none;
}

/* -------------------- BANNER -------------------- */

.banner
{    
    position: absolute;
    bottom: 0;
    background-color: var(--background);
    width: 100%;
    overflow: hidden;
    /* height: 0; */

    transform: translateY(100%);
    transition: 0.5s ease-in-out;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: top;
        -ms-flex-align: top;
            align-items: top;

    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    z-index: 4;
}

.banner__open
{
    transform: translateY(0);
}


.banner-text
{
    width: 70%;
    max-width: 1000px;
    height: 100%;
    text-align: center;
    
    margin-bottom: 2.5rem;
}

.banner-text p
{    
    font-size: calc(20px + 5 * ((100vw - 768px) / 1152));
}
.banner-text p:nth-child(1)
{
    font-size: calc(15px + 3 * ((100vw - 768px) / 1152));
    margin: 3rem 0;
}

.banner-text p:nth-child(3)
{
    margin-top: 1.2em;
}
.banner-text p:nth-child(3):empty
{
    margin-top: 0;
}

/* -------------------- MARQUEE -------------------- */

.marquee-wrapper
{    
    overflow: hidden;
    z-index: 3;
    position: absolute;
    bottom: 0;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
}

.marquee
{
    width: 100%; 
    will-change: transform;   
}

.marquee-text
{
    margin-bottom: 15px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-line-pack: bottom;
        align-items: bottom;


    justify-content: start;

    
}
.marquee-text span
{
    
    display: inline-block;
    vertical-align: bottom;

    margin: 0;
    padding: 0;
}

.marquee-text span:nth-child(1)
{
    font-size: calc(30px + 20 * ((100vw - 768px) / 1152));
    margin-right: 4rem;
}

.marquee-text span:nth-child(2)
{
    font-size: calc(23px + 15 * ((100vw - 768px) / 1152));
    margin-right: 4rem;
}
.marquee-text span:nth-child(3)
{
    font-size: calc(15px + 10 * ((100vw - 768px) / 1152));
}

/* -------------------- Go to the top -------------------- */

.to-top
{
    display: none;
}

/* ===========================================================================
                                OVERVIEW 
   =========================================================================== */
   
.overview {
    
    width: 100vw;
    padding: 0;
	height: 100vh;
	position: relative;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Hide scrollbar in FF */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: right;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
    user-select: none;
    padding-left: 20%;

}

.overview__item {
    flex: none;
    padding-bottom: 6rem;
    position: relative;  
}

.overview__item-inner {
	white-space: nowrap;
	position: relative;
    cursor: pointer;
    font-size: calc(26px + 4 * ((100vw - 768px) / 162));
    display: block;
    z-index: 36;
}

.overview__item-inner-number
{
    margin-right: 3rem;
    pointer-events: none;
}
.overview__item-inner-roles
{
    font-size: 2.1rem;
    margin-left: 3rem;
    pointer-events: none;
} 

.overview__item-inner-more,
.overview__item-inner-more_FR
{
    font-size: calc(26px + 4 * ((100vw - 768px) / 162));
    position: absolute;
    top: 0rem;
    //left: -12rem;
    opacity: 0;
    pointer-events: none;
}

.overview__item-inner-more_FR{
    //left: -1.9rem;
}


.overview__item a,
.overview__item > a + p 
{
    transition: .3s ease-in-out;    
}
.overview__item a:hover
{
    opacity: 0;
}

.overview__item > a:hover + p 
{
    opacity: 1;
}

::-webkit-scrollbar {
  display: none;
}

.mobile__title
{
    display: none;
}

/* -------------------- THUMBNAIL -------------------- */

.thumbnail
{
    position: fixed;
    top: 50%;
    left: 75%;
    
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
    height: 50%;
    opacity: 0;
    transition: .25s ease-in-out;

    pointer-events: none;
}

.thumbnail__show
{
    opacity: 1;
}

/* -------------------- TRANSITION THUMBNAIL -------------------- */

#transition__thumbnail
{
    position: fixed;
    top: 50%;
    left: 75%;
    
    transform: translateY(-50%) translateX(-50%);
 
    height: 50%;
    opacity: 1;
    z-index: 4;
}



/* ===========================================================================
                                ABOUT
   =========================================================================== */



/* -------------------- BALL CANVA -------------------- */

#processingCanvas
{
    position: fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;
    
    z-index: 500;
    background-color: transparent;

    pointer-events: none;
}


/* -------------------- WRAPPER -------------------- */

#about_wrap
{
    width: calc(100% - 100px);
    margin: 20rem 5rem 0 5rem;
    font-size: calc(28px + 7 * ((100vw - 768px) / 1152));

}
  
/* -------------------- INTRO -------------------- */

#intro_about{
    font-size: calc(35px + 20 * ((100vw - 768px) / 1152));
    line-height: 1.25;
    margin-bottom: 18rem;
}

#about_wrap  a {
    display: inline-block;
    margin: 0;
    padding: 0;
}
#intro_about  a:after {
    content: ""; 
    display: block; 
    width: 100%;
    border-bottom: calc(2px + 2 * ((100vw - 768px) / 1152)) solid var(--foreground);
    transition: 0.5s;

}

#intro_about a:hover:after {
    width: 0%;
}

/* -------------------- GRID CELLS -------------------- */

#services
{
    grid-area: services;
}

#awards
{
    grid-area: awards;
}

#follow
{
    grid-area: follow;
    margin-bottom: 5rem;
}

#studios
{
    grid-area: studios;
}

#clients
{
    grid-area: clients;
}

#thanks
{
    grid-area: thanks;
    margin-bottom: 5rem;
}

/* -------------------- GRID -------------------- */

.about_grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "services studios "
    "awards clients"
    "follow thanks";
    column-gap: 5rem;
    line-height: 1.3;
}

li
{
    list-style: none;
}

h2
{
    font-size: calc(28px + 7 * ((100vw - 768px) / 1152));
    font-weight: normal;
    font-family: 'basier-circle-medium', sans-serif, Helvetica, Arial;
    margin-bottom: 5rem;
}


.about_grid-section
{
    margin-bottom: 14.5rem;
}

/*
#clients span
{
    font-size: calc(28px + 7 * ((100vw - 768px) / 1152));
}
*/


#follow p>a:after,
#follow a:after
{
    content: ""; 
    display: block; 
    width: 100%;
    border-bottom: calc(2px + 1 * ((100vw - 768px) / 1152)) solid var(--foreground);
    transition: 0.5s;

}



#follow  a:hover:after,
#follow p>a:hover::after
{
    width: 0%;
}



/* ===========================================================================
                                TABLET AND MOBILE
   =========================================================================== */

/* -------------------- LANDSCAPE TOUCHE DEVICES -------------------- */
@media (hover:none) and (orientation: LANDSCAPE)
{
    .thumbnail-wrapper
    {
        margin-bottom: 200px;
    }
}

/* -------------------- TABLET -------------------- */

@media (max-width: 770px),
(hover:none) { 

    html
    {
        cursor: initial;
    }

    main
    {        
        -ms-scroll-snap-type: none;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: touch;
        -webkit-scroll-snap-type: none;
    }
    
    /* ===============
        NAVIGATION
        =============== */

    #navigation__desktop
    {
        display: none;
    }

    #navigation__mobile
    {

        display: initial;
    }

    nav 
    {    
        padding: 2rem 2rem 0 2rem;                         
    }

    .nav-links a {
        font-size: calc(18px + 3  * ((100vw - 375px) / 390)); 
    }

     /* ===============
        NAVIGATION
        =============== */

    .menu
    {
        display: flex;
    }
    .global-cursor
    {
        display: none;
    }

    /* ===============
        HOMEPAGE
        =============== */
   
    /* ----- INTRO ----- */
    #intro svg
    {
        width: calc(100% - 40px);
        bottom: 15px;
    } 

    /* ----- PROJECT SECTION ----- */


   

    .project-wrapper
    {
        display: grid;
        grid-template-areas:
        "title"
        "thumbnail"
        "banner"    
        "images";
        grid-template-rows: auto auto auto auto;
        grid-auto-rows: auto;
        grid-template-columns: 1fr;
        height: initial;
        
        padding: 0;
    }

    .swipe-detect
    {
        display: initial;
    }

    .carousel-wrapper
    {
        grid-area: images;
    }
    .project__image
    {
        display: initial;
        display: flex;
        align-items: center;
        justify-content: center;
       
        grid-area: thumbnail;
        margin-bottom: 3rem;
    }
    .project__image img
    {
        width: 100%;
        margin: auto;
    }
    .carousel-wrapper {
        width: 100%;
        height: 100%;
        position: initial;
    }
    
    .img-container {    
        float: initial ;
        height: auto;
        width: 100% !important;
        
        max-width: 768px !important;
    }

    .carousel .img-container {    
        float: initial ;
        height: auto;
        /* width: 100% !important;
        
        max-width: 768px !important; */
        max-width: 100% !important;
    }

    .img-container img {
        
        width: 100%;
        height: auto;
    }

    .project__title
    {
        grid-area: title;
        text-align: center;
        font-size: calc(35px + 15 * ((100vw - 375px) / 390));    
        display: block;
        margin: auto;

        margin-bottom: 5rem;
        margin-top: 15rem;
    }
    
    /* ----- REMOVE UNECESSARY PARTS ----- */

    .marquee-wrapper
    {    
        display: none;
    }

    .mouse-detect {
        display: none;
    }

    .wrapper .project-wrapper 
    {
        scroll-snap-align: none;
        scroll-snap-stop: none;
    }

    .carousel .img-container:first-of-type,
    .carousel .img-container:last-of-type,
    .carousel .img-container:nth-of-type(2)
    {
        display: none;
    }

    .carousel .img-container
    {
        margin-bottom: 3rem;
    }

    /* ----- BANNER ----- */
    
    .banner
    {
        transform: translateY(0);
        position: initial;
        grid-area: banner;
        margin-bottom: 0rem;
        padding: 0 2rem;
    }

    .banner-text
    {
        width: 100%;
    }

    .banner-text p
    {    
        font-size: calc(18px + 6 * ((100vw - 375px) / 390));    
    }
    .banner-text p:nth-child(1)
    {
        font-size: calc(13px + 3 *((100vw - 375px) / 390));    
    }

    /* ----- TO THE TOP ----- */

    .to-top
    {
        position: initial;
        display: flex;
        justify-content: center;
        margin: 6rem 0 4rem 0;
        cursor: pointer;
        font-size: 1.8rem;
    }

    /* ===============
        OVERVIEW
        =============== */

  
    .overview {

        padding: initial;
        height: initial;
        display: initial;

        -webkit-box-align: initial;
        -ms-flex-align: initial;
        align-items: initial;        

        padding-left: initial;

        margin: 2rem 0;
        height: 100vh;
        
    }

    .mobile__title
    {
        display: initial;
        position: fixed;
        text-align: center;
        bottom: 20px;
        left: 0;
        width: 100%;
        opacity: 0;
        font-size: 1.3rem;
        line-height: 3.5rem;
        transition: 0.25s ease-in-out;
        transition-delay: 0s;
        pointer-events: none;
    }

    .mobile__title-active
    {
        transition-delay: 0.25s;
        opacity: 1;
    }

    .mobile__title p:first-of-type
    {
        text-transform: uppercase;
        font-size: 3.5rem;
    }

    .overview__item {
        display: none;
    }

    /* ----- THUMBNAIL ----- */

    .thumbnail
    {
        position: initial;
    
        -webkit-transform: initial;    
        -ms-transform: initial;
        transform: initial;
        
        z-index: initial;
        height: initial;
        opacity: 1;
        width: 100%;

        transition: initial;
        pointer-events: initial;
    }

    .thumbnail-link
    {
        /* cursor: pointer; */
    }

    .thumbnail-wrapper
    {        
        height: 100vh;

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 2rem;
        pointer-events: none;
    }
    /* ----- TRANSITION THUMBNAIL RAPPER ----- */
    
    #transition__thumbnail-wrapper
    {
        display: none;
    }

    

    /* ===============
        ABOUT
        =============== */


    /* ----- WRAPPER ----- */
    #about_wrap
    {      
        font-size: calc(20px + 18 * ((100vw - 375px) / 390));    
        width: calc(100% - 40px);
        margin: 13rem 2rem 0 2rem;
    }

    /* ----- INTRO ----- */
    #intro_about{
        font-size: calc(20px + 18 *  ((100vw - 375px) / 390));   
        margin-bottom: 20rem;
    }

    /* ----- GRID ----- */

    .about_grid
    {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "services"
        "awards"
        "studios"
        "clients"
        "follow"
        "thanks";
    }

    h2
    {
        font-size: calc(20px + 18 * ((100vw - 375px) / 390));    
        font-weight: normal;
        margin-bottom: 3rem;
    }

    .about_grid-section
    {
        margin-bottom: 10rem;
    }

    #follow
    {
        margin-bottom: 10rem;
    }

    #thanks
    {
        margin-bottom: 25px;
    }
    #thanks h2
    {
        margin-bottom: 0;
    }
    
} 

/* -------------------- MOBILE -------------------- */

@media (max-width: 375px) { 
    
    /* ===============
        NAVIGATION
        =============== */

    .nav-links a {  
        font-size: 1.8rem;
    }

    /* ===============
        HOMEPAGE
        =============== */

    /* ----- PROJECT SECTIONS ----- */
    .project__title
    {
        font-size: 3.5rem;
        line-height: 1;
    }

    /* ----- BANNER ----- */
    
    .banner-text p
    {    
        font-size: 1.8rem;    
    }
    .banner-text p:nth-child(1)
    {
        font-size: 1.3rem;
    }

    /* ===============
        OVERVIEW
        =============== */

    /* ----- WRAPPER ----- */

    #about_wrap
    {
        font-size: 1.8rem;
    }

    /* ----- INTRO ----- */

    #intro_about
    {
        font-size: 1.8rem;
        margin-bottom: 10rem;
    }
  
    h2
    {
        font-size: 2rem;        
    }

     /* ===============
        ABOUT
        =============== */

    /* ----- GRID ----- */

    .about_grid-section
    {
        margin-bottom: 7rem;
    }

    #follow
    {
        margin-bottom: 7rem;
    }
}

@media (max-width: 330px) { 

    .menu-bottom a
    {
        font-size: 2.5rem;
    }
}