@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aguafina+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');


.colors {color:#FF7A00; color:#3A86FF;  }

/*   ------------   NOTES     ------------

font-family: "Aguafina Script", cursive; 
font-family: "Metamorphous", serif;
font-family: "Quicksand", sans-serif;
font-family: "Merriweather", serif;
font-family: "BBH Hegarty", sans-serif;
font-family: "Play", sans-serif;
font-family: "Kanit", sans-serif;
font-family: "Orbitron", sans-serif;

background: linear-gradient(to right, #a75454, #c41919); 
width: min-content; *************   
calc(100% - 20px)
transition:2s;
scroll-margin-top: 13vh; ----corrects internal link location with a fixed element 

scroll-snap-align: start;
scroll-snap-stop: always;
scroll-snap-type: y proximity;
scroll-snap-align: start;
scroll-snap-type: proximity;
scroll-snap-type: y proximity;
scroll-snap-type: mandatory;
scroll-snap-type: y mandatory;
scroll-snap-points-y: repeat(100vh);

Gradient Site : https://cssgradient.io/
*/

* { box-sizing: border-box; margin: 0; padding: 0;  }

html, body {
padding: 0;
margin: 0;
scroll-behavior: smooth;
scrollbar-width:none; 
scrollbar-color:rgb(0, 0, 0); 
font-family: "Play", sans-serif;}

P {color:#666;
   font-size:16px;
   line-height:16px;}

H6 {font-size:20px;
    color:#333;}

H5 {font-size:25px;
color: #222;}

H4 {font-size:30px;
font-family: "Play", sans-serif;}

H3 {
width:70%;
text-align: center;
font-size:34px;
font-weight:600;
font-family: "Play", sans-serif;
color:#f1f1f1;
text-shadow: #666 1px 1px 1px; }

H2 {
color:#999
text-shadow: #222 1px 1px 1px;
font-size:42px;}

H1 {font-size:50px; 
    font-weight:700; 
    font-family: "Play", sans-serif;}


/* ------------------------------- */

#wrapper {
width:100vw;
height:auto; }

#container {
width:100%;
height:auto;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: 
'header'
'grid'; }

header {
width:100vw;
height:10vh;
margin:0 auto;
display: grid;
grid-area: header;
position: fixed;
top:0;
z-index: 9;
align-items: center;
background-color: #222;
padding-top:2px;
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas: 'nav_box' ; }

    .nav_box {
    width:60%;
    height:8vh;
    display: grid;
    margin:0 auto;
    font-family: "Play", sans-serif;
    grid-area: nav_box;
    align-items: center;
    grid-template-columns: 25% 75%;
    grid-template-rows: 100%;
    grid-template-areas: 
    'logo navigation' ; }

        .logo {
        width:100%;
        height:100%;
        grid-area: logo;
        display: grid;
        align-items: center;
        grid-template-columns: auto;
        grid-template-rows: 50% 50%;
        grid-template-areas: 
        'logo_top'
        'logo_bot'; }

            .logo_top {
            height:100%;
            grid-area: logo_top;
            display: grid;
            justify-content: center; align-items: end;
            font-family: "Play", sans-serif;
            font-weight:800;
            font-size: 40px;
            color: #3A86FF; }

            .logo_bot {
            height:auto;
            grid-area: logo_bot;
            display: grid;
            justify-content:center; align-items:end;
            font-family: "Play", sans-serif;
            font-weight:500;
            font-size: 34px;
            color:white; }

        .navigation {
        width:100%;
        height:100%;
        grid-area: navigation;
        display: flex;
        align-items: center; text-align: center;
        padding-left:2px; }

        .navigation a {
        min-width:100px;
        height:auto;
        padding: 1em 1em;
        margin:0 5px 0 5px;
        background-color: #333;
        border:1px solid #444;
        color:#3A86FF;
        text-shadow: 0px 0px 1px #666;
        font-size:17px;
        font-weight: 700; }

        .navigation a:hover {
        border:1px solid #333;
        opacity:70%; }



/* -------------------------------------------- */


#grid {
width:100%;
height:auto;
margin-top:4px;
grid-area: grid;
display: grid;
position: absolute;
top:10vh;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
'message' 
'menu'
'full_width_1'
'full_width_2'
'full_width_3'
'full_width_3-2'
'full_width_3-3'
'full_width_3-4'
'full_width_7'
'full_width_4'
'full_width_5'
'full_width_6'
'full_width_6-1'
'designer_full_width'
'footer'; }

    .menu {
    width:100%;
    height:10vh;
    grid-area: menu;
    background-color:white;
    justify-content: center; align-items: center;
    display: grid;
    grid-template-columns:auto;
    grid-template-rows: auto;
    grid-template-areas: 
    'menu_box'; }

        .menu_box {
        width:60%;
        height:8vh;
        margin:0 auto;
        grid-area:menu_box;
        display: grid;
        align-items: center;
        border-top:1px solid #f1f1f1;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: 'menu_nav_1';}
            
            .menu a {
            font-size:16px;
            font-weight:700;
            color:#444;
            font-family: "Quicksand", sans-serif;}

            .menu_picture {
            width:auto;
            height:8vh;
            grid-area: menu_picture;
            display: flex;
            justify-content: center;
            align-items: center;}

            .menu_picture img {
            width:auto;
            height:8vh;
            object-fit: contain;}

            .menu_nav_1 {
            width:100%;
            height:8vh;
            margin:0 auto;
            grid-area: menu_nav_1;
            display: flex;
            justify-content: center;
            align-items: center; }

            .menu_nav_1 a {
            margin-right:5px;
            border:1px solid silver;}

            .menu_nav_2 {
            width:100%;
            height:4vh;
            grid-area: menu_nav_2;
            display: flex;
            justify-content: left;
            align-items: center; }

            .menu_nav_2 a {
            margin-right:5px;
            border:1px solid silver;}

    .message {
    width:100vw;
    height:5vh;
    grid-area: message;
    background-color:#acc8f5;
    align-items: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'message_text'; }

        .message_text {
        width:60%;
        height:90%;
        margin:0 auto;
        grid-area: message_text;
        display: flex;
        justify-content: center; align-items: center;
        color:white;
        text-shadow: #333 1px 1px 1px;
        white-space: nowrap;
        font-family: "Play", sans-serif;
        font-size: 30px;
        font-weight:800;
        text-align: center; }

/* ------------------------------------ */

    .full_width_1 {
    width:100%;
    height:50vh;
    grid-area: full_width_1;
    background-color: #222;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
    'partial_width_1'; }

        .partial_width_1 {
        width:60%;
        height:auto;
        margin:0 auto;
        grid-area: partial_width_1;
        justify-content: center; align-items: center;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_1a box_1b'; }

        .box_1a {
        width:100%;
        height:50vh;
        grid-area: box_1a;
        align-items: center; text-align: center;
        border-radius: 20px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 40% 60%;
        grid-template-areas: 
        'box_1a_top'
        'box_1a_bottom'; }

            .box_1a_top {
            width:100%;
            height:100%;
            margin-top:10px;
            grid-area: box_1a_top;
            display: flex;
            justify-content: center; align-items: end; text-align: center; }

            .box_1a_top H3 {
            width:70%;
            text-align: center;
            font-size:34px;
            font-weight:600;
            font-family: "Play", sans-serif;
            color:#333;
            text-shadow: #666 1px 1px 1px; }

            .box_1a_bottom {
            width:100%;
            height:100%;
            margin-bottom:50px;
            grid-area: box_1a_bottom;
            display: flex;
            justify-content: center; align-items: center; text-align: center; }

            .box_1a_bottom a {text-decoration: none; margin-left:1%; margin-right:1%;}

        .box_1b {
        width:100%;
        height:50vh;
        border-radius: 25px;
        grid-area: box_1b;
        justify-content: center; align-items: center; text-align: center;
        display: flex; }

/* --------------------------------------------- */

    .full_width_2 {
    width:100%;
    height:50vh;
    grid-area: full_width_2;
    background-color: white;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_2'; }

        .partial_width_2 {
        width:60%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_2;
        justify-content: center;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 20% 40% 40%;
        grid-template-areas: 
        'box_2_header box_2_header box_2_header'
        'box_2_top_left box_2_top_mid box_2_top_right'
        'box_2_bottom_left box_2_bottom_mid box_2_bottom_right'; }

            .partial_width_2 p {
            font-size:15px;
            font-weight: 500;
            padding:8%;
            text-align: center;
            color: #666; }

            .partial_width_2 h6 {
            width:90%;
            font-size:20px;
            color:#444;
            font-family: "Play", sans-serif;
            text-align: center;  }

            .box_2_header {
            width:100%;
            height:100%;
            grid-area: box_2_header;
            display: flex; border-bottom:1px solid black; margin-bottom:36px;
            justify-content: center; align-items: center; text-align: center; }

            .box_2_top_left {
            width:100%;
            height:100%;
            grid-area:box_2_top_left;
            display: grid;
            text-align: center; }
            
            .box_2_top_mid {
            width:100%;
            height:100%;
            grid-area:box_2_top_mid;
            display: grid; }
            
            .box_2_top_right {
            width:100%;
            height:100%;
            grid-area:box_2_top_right;
            display: grid; }

            .box_2_bottom_left {
            width:100%;
            height:100%;
            grid-area:box_2_bottom_left;
            display: grid; }

            .box_2_bottom_mid {
            width:100%;
            height:100%;
            grid-area:box_2_bottom_mid;
            display: grid;}

            .box_2_bottom_right {
            width:100%;
            height:100%;
            grid-area:box_2_bottom_right;
            display: grid; }

/* --------------------------------------------------- */

    .full_width_3 {
    width:100%;
    height:auto;
    min-height:25vh;
    grid-area: full_width_3;
    background-color: #f1f1f1;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_3';}

        .partial_width_3 {
        width:50%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_3;
        display: grid;
        align-items: center;
        text-align: center; }

            .box_3a {
            width:100%;
            height:100%;
            color:white; font-weight:800;
            grid-area: box_3a;
            align-items: center; text-align: center;
            display: grid; }

            .box_3b {
            width:100%;
            height:100%;
            color:white; font-weight:800;
            grid-area: box_3b;
            align-items: center; text-align: center;
            display: grid; }

/* -------------------------------------------- */

.full_width_3-2 {
    width:100%;
    height:40vh;
    min-height:15vh;
    grid-area: full_width_3-2;
    background-color: white;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_3-2';}

        .partial_width_3-2 {
        width:60%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_3-2;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_3-2_text box_3-2_text box_3-2_text'
        'box_3-2_pictures box_3-2_pictures box_3-2_pictures';}

            .box_3-2_text {
            width:100%;
            height:100%;
            margin:10px;
            grid-area: box_3-2_text;
            display: flex;
            justify-content: center; align-items: center; }

                .box_3-2_text h5 { font-size:22px; color:#444; font-weight: 500; padding-right:1%; border-right:1px solid #333; }

                .box_3-2_text p { font-size: 16px; padding-left:1%; color:#888; }

            .box_3-2_pictures {
            width:100%;
            height:100%;
            border-radius: 25px;
            grid-area: box_3-2_pictures; 
            display: flex;
            justify-content: center; }
            

            .box_3-2_pictures img {
            width:95%;
            padding:2%;
            margin:2%;
            border-radius: 25px;
            justify-content: center;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out; }

            .box_3-2_pictures img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }



/* ---------------------FULL WIDTH 3-3 ----------------------- */

    .full_width_3-3 {
    width:100%;
    height:50vh;
    grid-area: full_width_3-3;
    background-color: #f1f1f1;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
    'partial_width_3-3'; }

        .partial_width_3-3 {
        width:60%;
        height:auto;
        margin:0 auto;
        grid-area: partial_width_3-3;
        justify-content: center; align-items: center;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_3-3a box_3-3b'; }

        .box_3-3a {
        width:100%;
        height:50vh;
        grid-area: box_3-3a;
        align-items: center; text-align: center;
        border-radius: 20px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 33% 33% 33%;
        grid-template-areas: 
        'box_3-3a_top'
        'box_3-3a_mid'
        'box_3-3a_bottom'; }

            .box_3-3a_top {
            width:100%;
            height:100%;
            margin-top:10px;
            grid-area: box_3-3a_top;
            display: flex;
            justify-content: center; align-items: center; text-align: center; }

            .box_3-3a_mid {
            width:100%;
            height:100%;
            margin-top:10px;
            grid-area: box_3-3a_mid;
            display: flex;
            justify-content: center; align-items:center; text-align: center; }

                .box_3-3a_mid p {
                    width:70%; font-size:14px; color:#333;}

                .box_3-3a_top H3 {
                width:70%;
                text-align: center;
                font-size:34px;
                font-weight:600;
                font-family: "Play", sans-serif;
                color:#333;
                text-shadow: #666 1px 1px 1px; }

            .box_3-3a_bottom {
            width:100%;
            height:100%;
            margin-bottom:10px;
            grid-area: box_3-3a_bottom;
            display: flex;
            justify-content: center; align-items: center; text-align: center; }

                .box_3-3a_bottom a {text-decoration: none; margin-left:1%; margin-right:1%;}

        .box_3-3b {
        width:100%;
        height:50vh;
        border-radius: 25px;
        grid-area: box_3-3b;
        justify-content: center; align-items: center; text-align: center;
        display: flex; }


/* ------------------- FULL WIDTh 3-4 ------------------------------- */

.full_width_3-4 {
    width:100%;
    height:auto;
    min-height:30vh;
    margin:20px 0px 20px 0px;
    grid-area: full_width_3-4;
    background-color: white;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_3-4';}

        .partial_width_3-4 {
        width:60%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_3-4;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_3-4_text box_3-4_text box_3-4_text'
        'box_3-4_pictures box_3-4_pictures box_3-4_pictures'
        'box_3-4_pictures_text_1 box_3-4_pictures_text_2 box_3-4_pictures_text_3';}

            .box_3-4_text {
            width:100%;
            height:100%;
            margin:10px;
            grid-area: box_3-4_text;
            display: flex;
            justify-content: center; align-items: center; }

                .box_3-4_text h5 { font-size:22px; color:#444; font-weight: 500; padding-right:1%; border-right:1px solid #333; }

                .box_3-4_text p { font-size: 16px; padding-left:1%; color:#888; }

            .box_3-4_pictures {
            width:100%;
            height:100%;
            border-radius: 25px;
            grid-area: box_3-4_pictures; 
            display: flex;
            justify-content: center; }
            
            .box_3-4_pictures img {
            width:95%;
            padding:2%;
            margin:2%;
            border-radius: 25px;
            justify-content: center;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out; }

            .box_3-4_pictures img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }

            .box_3-4_pictures_text_1 {
            width:80%;
            margin:0 auto;
            min-height:30px;
            height:100%;
            border-radius: 5px;
            background-color:#3A86FF;
            color:white;
            grid-area: box_3-4_pictures_text_1; 
            display:grid;
            justify-content: center; align-items: center; }

            .box_3-4_pictures_text_2 {
            width:80%;
            margin:0 auto;
            min-height:30px;
            height:100%;
            border-radius: 5px;
            background-color: #3A86FF;
            color:white;
            grid-area: box_3-4_pictures_text_2; 
            display:grid;
            justify-content: center; align-items: center; }

            .box_3-4_pictures_text_3 {
            width:80%;
            margin:0 auto;
            min-height:30px;
            height:100%;
            border-radius: 5px;
            background-color: #3A86FF;
            color:white;
            grid-area: box_3-4_pictures_text_3; 
            display:grid;
            justify-content: center; align-items: center; }


/* --------------------------------------------- */

    .full_width_4 {
    width:100%;
    height:50vh;
    grid-area: full_width_4;
    background-color: #777;
    border-bottom:1px solid #111;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_4';  }

        .partial_width_4 {
        width:60%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_4;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_4a box_4b'; }

            .box_4a {
            width:100%;
            height:100%;
            grid-area: box_4a;
            align-items: center; text-align: center;
            display: grid;
            grid-template-columns:auto;
            grid-template-rows: auto;
            grid-template-areas: 
            'box_4a_top'
            'box_4a_bottom'; }

                .box_4a_top {
                width:100%;
                height:100%;
                border-bottom:1px solid black;
                grid-area: box_4a_top;
                display: flex;
                justify-content: center; align-items: center; text-align: center;  }

                .box_4a_bottom {
                width:100%;
                height:100%;
                grid-area: box_4a_bottom;
                display: flex;
                justify-content: center; align-items: center; text-align: center; }


            .box_4b {
            width:100%;
            height:100%;
            grid-area: box_4b;
            align-items: center; text-align: center;
            display: grid;
            grid-template-columns:auto;
            grid-template-rows: auto;
            grid-template-areas: 
            'box_4b_top'
            'box_4b_bottom'; }

                .box_4b_top {
                width:100%;
                height:100%;
                border-bottom:1px solid black;
                grid-area: box_4b_top;
                display: flex;
                justify-content: center; align-items: center; text-align: center;  }

                .box_4b_bottom {
                width:100%;
                height:100%;
                grid-area: box_4b_bottom;
                display: flex; 
                justify-content: center; align-items: center; text-align: center; }


    /* --------------------------------------- */

    .full_width_5 {
    width:100%;
    height: auto;
    grid-area: full_width_5;
    background-color: #222;
    justify-content: center; align-items: center;
    display: grid; 
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_5' ;}

        .partial_width_5 {
        width:60%;
        height:100%;
        margin:0 auto;
        justify-content: center; align-items: center;
        grid-area: partial_width_5;
        display: grid;
        grid-template-columns:100%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_5a'; }

            .box_5a {
            width:100%;
            height:100%;
            grid-area: box_5a;
            align-items: center; text-align: center;
            display: flex;
            justify-content: center; align-items: center; }

            .box_5a img {margin:2%;}


/* ----------------------------------- */


    .full_width_6 {
    width:100%;
    height:auto;
    min-height:60vh;
    margin:0 auto;
    grid-area: full_width_6;
    background-color: white;
    justify-content: center; align-items: center;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_6' ;}

        .partial_width_6 {
        width:60%;
        height:100%;
        margin:0 auto;
        justify-content: center; align-items: center;
        grid-area: partial_width_6;
        display: grid;
        grid-template-columns:100%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_6a'; }

            .box_6a {
            width:100%;
            height:100%;
            background-color: red;
            grid-area: box_6a;
            display: flex;
            justify-content: center; align-items: center; }

            .box_6a img {margin:2%;}

    /* -------------------------------------------------------------- */

    .full_width_6-1 {
    width:100%;
    height:auto;
    min-height:60vh;
    margin:0 auto;
    grid-area: full_width_6-1;
    background-color: #777;
    border-top:1px solid black;
    justify-content: center; align-items: center;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_6-1' ;}

        .partial_width_6-1 {
        width:60%;
        height:100%;
        margin:0 auto;
        justify-content: center; align-items: center;
        grid-area: partial_width_6-1;
        display: grid;
        grid-template-columns:100%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_6-1a'; }

            .box_6-1a {
            width:100%;
            height:100%;
            background-color: red;
            grid-area: box_6-1a;
            display: flex;
            justify-content: center; align-items: center; }

            .box_6-1a img {margin:2%;}


/* ----------------------------------------------------- */

.full_width_7 {
    width:100%;
    height:auto;
    min-height:30vh;
    margin:20px 0px 20px 0px;
    grid-area: full_width_7;
    background-color: #f1f1f1;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_7';}

        .partial_width_7 {
        width:60%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_7;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_7_pictures_top box_7_pictures_top box_7_pictures_top box_7_pictures_top'
        'box_7_pictures_bot box_7_pictures_bot box_7_pictures_bot box_7_pictures_bot';}

            .box_7_pictures_top {
            width:100%;
            height:100%;
            border-radius: 25px;
            grid-area: box_7_pictures_top; 
            display: flex;
            justify-content: center; }

            .box_7_pictures_bot {
            width:100%;
            height:100%;
            border-radius: 25px;
            grid-area: box_7_pictures_bot; 
            display: flex;
            justify-content: center; }
            
            .partial_width_7 img {
            width:95%;
            padding:2%;
            margin:2%;
            border-radius: 25px;
            justify-content: center;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out; }

/* ---------------------------------------------------- */


    .designer_full_width {
    width:100%;
    height:100%;
    grid-area: full_width_1;
    background-color: #222;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
    'partial_width_1'; }

        .designer {
        width:60%;
        height:70vh;
        margin:0 auto;
        grid-area: designer;
        background-color: #555;
        display: flex;
        justify-content: right; }

        .embed-container { }

        #inksoftEmbed { }


/* --------------------------------------------- */

    
    .full_page_global {
    width:100%;
    height:90vh;
    margin:0 auto;
    grid-area: full_page_global;
    background-color: #777;
    justify-content: center; align-items: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 100%;
    grid-template-areas: 
    'full_page_content'; }

        .full_page_content {
        width: 60%;
        height:auto;
        margin:0 auto;
        grid-area: full_page_content;
        display: flex;
        justify-content: center; align-items: center; text-align: center;}


    /* ----------- FOOTER --------------------------------------- */

    .footer {
    width:100%;
    min-height:15vh;
    background-color: #222;
    font-family: "Play", sans-serif;
    grid-area: footer;
    align-items: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'footer_links'; }

        .footer_links {
        width:60%;
        min-height:15vh;
        margin:0 auto;
        grid-area: footer_links;
        background-image: linear-gradient(to right, #222 , #333, #444, #555, #444, #333, #222);
        align-items: center; text-align: center;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: auto;
        grid-template-areas: 'footer_menu_1 footer_menu_2 footer_menu_3 footer_menu_4'; }

            .footer_menu_1 {
            width:auto;
            height:auto;
            grid-area: footer_menu_1;
            display: grid; }

                .footer_menu_1 li {
                text-decoration: none; 
                list-style-type: none;
                margin-top:10px;
                margin-bottom:10px; }

                .footer_menu_1 a {
                font-size:16px;
                font-weight:700;
                padding:4px;
                color:white;
                font-family: "Quicksand", sans-serif; }

            .footer_menu_2 {
            width:100%;
            height:auto;
            grid-area: footer_menu_2;
            display: grid; }

                .footer_menu_2 li {
                text-decoration: none; 
                list-style-type: none; 
                margin-top:10px;
                margin-bottom:10px;}

                .footer_menu_2 a {
                font-size:16px;
                font-weight:700;
                padding:4px;
                color:white;
                font-family: "Quicksand", sans-serif;  }

            .footer_menu_3 {
            width:100%;
            height:auto;
            grid-area: footer_menu_3;
            display: grid; }

                .footer_menu_3 li {
                text-decoration: none; 
                list-style-type: none; 
                margin-top:10px;
                margin-bottom:10px;}

                .footer_menu_3 a {
                font-size:16px;
                font-weight:700;
                padding:4px;
                color:white;
                font-family: "Quicksand", sans-serif;  }

            .footer_menu_4 {
            width:100%;
            height:auto;
            grid-area: footer_menu_4;
            display: grid; }

                .footer_menu_4 li {
                text-decoration: none; 
                list-style-type: none;
                font-weight:100; 
                margin-top:10px;
                margin-bottom:10px;}

                .footer_menu_4 a {
                font-size:16px;
                font-weight:800;
                padding:4px;
                color:white;
                font-family: "Quicksand", sans-serif; }



/* ----------------------------------------------------------- BUTTONS --------------- */

span {}

.navbutton {
min-width:100px;
background-color:#333;
color: white;
border:1px solid #555;
padding: 10px;
font-size: 16px;
display: block;
cursor: pointer; }

.navbutton:hover {background-color:#444;}

.navbutton a {
width:100%;
height: 100%;
font-size: 15px;
font-weight:700;
color:white;
font-family: "Quicksand", sans-serif; }

/* --------------------------------------------- */

.navbutton2 {
background-color:#222;
color:white;
border-radius: 4px;
border-right:1px solid black;
border-left:1px solid black;
margin-right:1%;
padding: 12px;
font-size: 16px;
border: none;
cursor: pointer;
white-space: nowrap; }

.navbutton2:hover {background-color: #444;}

.navbutton2 a {
font-size: 14px;
font-weight:700;
color:white;
font-family: "Quicksand", sans-serif; }

/* --------------------------------------------- */

.navbutton3 {
background-color:#222;
color: white;
border-radius: 4px;
border-right:1px solid black;
border-left:1px solid black;
margin-right:1%;
padding: 12px;
font-size: 16px;
border: none;
cursor: pointer;
display:block;
white-space: nowrap;}

.navbutton3:hover {background-color: #444;}

.navbutton3 a {
font-size: 14px;
font-weight:700;
color:white;
font-family: "Quicksand", sans-serif; }

/* -------------------------------------- */

.navbutton4 {
min-width:300px;
min-height:50px;
font-size: 30px;
font-weight:700;
font-family: "Play", sans-serif;
text-decoration: none;
color: white;
text-shadow: #333 2px 2px 2px;
border-radius: 50px;
padding: 30px;
border: none;
cursor: pointer;
display:block;
white-space: nowrap;
background-color: #3A86FF;}

.navbutton4:hover {background-color: #81aff8;
border:1px solid #333;}

.navbutton4 a {text-decoration: none;}



/* ------------------------------------------ GLOBAL ----------------------------- */

.padding1 {
width:100%;
height:100%;
grid-area: padding1;}