rocket-3d/templates/assets/css/index.css

    @font-face {
        font-family: 'Lato', sans-serif;
        src: url('fonts/Lato-Thin.ttf') format('truetype');
        font-style: normal;
        font-weight: 100;
    }

    @font-face {
        font-family: 'IBM Plex Sans', sans-serif;
        src: url('fonts/IBMPlexSans-Regular.ttf') format('truetype');
        font-style: normal;
    }
    
    *{
    	margin:0;
        padding:0;
        box-sizing:border-box;
    } 

    :root {
        --top_padding:5px;
 
        --gradient1: linear-gradient(
            45deg,
            hsl(160, 51%, 49%), 
            hsl(160, 51%, 59%), 
            hsl(160, 51%, 79%),
            hsl(160, 51%, 89%),
            #fff
        );

        --gradient2: radial-gradient(
            #000, 
            #333, 
            #999,
            #eee,
            #fff
        );

        --gradient3: radial-gradient(
            hsl(160, 51%, 79%),
            #fff,
            #eee
        );
    };

    html,
    body {
    	width: 100%;
        height: 100%;
    }

    /* Adjust Media Queries ! */

    @media (min-width: 1024px){

    .wrapper {
        display:grid;
        height:100vh;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 10% 22% auto 40%;
        grid-template-areas: 
        "top-bar top-bar top-bar top-bar"
        "main-bar main-bar main-bar main-bar"
        "main main main main"
        "footer footer footer footer";
        font-family: 'Lato', sans-serif;
        font-weight: 100;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }

    .top-bar {
        background-color:white;
        grid-area: top-bar;
        display: flex;
        align-items: center;   
    }

    .languages a:hover {
        color:  rgb(62, 190, 147);
    }

    #main-bar {
        background-color: black;
        grid-area: main-bar;
        z-index:1;
        display: flex;
        align-items: center;
        border-top: 1px solid rgb(62, 190, 147); 
        border-bottom: 3px solid rgb(62, 190, 147);
        box-sizing: border-box;
        min-width: 100vw;
        height: 80%;
        font-weight:100 !important;
    }

    #logo-container {
        margin-top: 6em;
    }

    .logo {
        z-index:3;
        width: 20vh;
        margin-left: 5vh;
    }

    .main-navigation-bar {
        z-index: 2;
        display:flex;
        align-items:center;
        position: relative;
        margin-left:5%;
    }

    .main-navigation-bar ul {
        list-style:none;
        position:relative;
        align-items:center;
        padding-top: 2%;
    }


    .main-navigation-bar ul li {
        position:relative;
        width:100%;
        text-align: left;
        padding-right: 4%;
    }

    .main-navigation-bar ul li a:hover {
    	color:  rgb(0, 255, 170);
    } 

    .main-navigation-bar ul li a {
        color:white;
        text-decoration: none;
        justify-content: space-between;
        padding: 10px 1.5em;
        line-height: 50px;
    }

    .main-navigation-bar ul li  #edit {
        text-decoration: none;
        justify-content: space-between;
        padding: 10px 1em;
        line-height: 50px;
    }

    .main-navigation-bar ul #learn {
        width:10em;
    }
    

    .main-navigation-bar ul ul {
        border-top: 3px solid rgb(62, 190, 147); 
        position: absolute;
        top: 90%;
        opacity: 0;
        visibility: hidden;
    }

    .main-navigation-bar ul li li {
        position: relative;
        float:left;
        display: list-item; 
    }

    .main-navigation-bar ul li:hover > ul {
    	opacity: 1;
    	visibility: visible;
    }

    main{
        grid-area: main;
    }

/*Footer*/

    footer {
        grid-area:footer;
    }

    #footer-wrapper  {
        color: white;
        border-top: solid 3px  rgb(62, 190, 147);
        border-bottom: solid 1px rgb(62, 190, 147);
        background-color: black;
        height:100%;
        display: grid;
        grid-template-columns: 1fr 0.8fr 1fr 1fr;
        grid-template-rows: 2fr 1fr;
        padding: 10vh 5vh 5vh 5vh ;
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        min-height: 60vh;
        min-width: 100vw;
     }

        #column1 {
            background-color: black;
            display:none;
        }


        #footer-logo {
            height: auto;
            width: 100%;
            text-align: center;
            padding-left: 20%;
            padding-top: 5%;
            padding-bottom:5%;
            padding-right: 20%;
        }
        
    #column2 {
        display:flex;
        flex-direction: column;
        text-align: center;
        grid-column: 1;
    }

        #column2 ul {
            list-style: none;
            text-align: center;
        }
        
    #column2 ul li p a {
        text-decoration:none;
        color:white;
        font-weight: 400;
        font-size: 2.25vh;
    }
        
    #column2 ul li {
        margin: 4.4vh
    }
        
    h6 {
        font-size: 2.85vh;
        text-transform: uppercase;
        font-weight: 300;
    }
        
    #column2 ul li a:hover {
        color: hsl(160, 100%, 90%);
    }

    #column3 {
        display:flex;
        flex-direction: column;
    }

    #column3 h6 {
        text-align: center;
    }
        
    #column3 ul {
        list-style: none;
        text-align: center;
    }
        
    #column3 ul li p a {
        text-decoration:none;
        color:white;
        font-weight: 400;
        font-size: 2.35vh;
    }
        
    #column3 ul li {
        text-align: center;
        margin: 4.5vh;
    }
        
        #column3 ul li a:hover {
            color:  hsl(160, 100%, 90%);
        }

    #column4 {
        display:flex;
        flex-direction: column;
        text-align: center;
    }

    #column4 p {
        font-size: 2.35vh;
        font-weight: 300;
        line-height: 4vh;
        margin-top: 4.5vh;
        text-align: center;
    }

    #column5 {
        display:flex;
        flex-direction: column;
        text-align: center;
    }
        
    #social-media ul {
        margin-top: 4.5vh
    }

        #social-media ul li {
            display:inline;
            list-style-type: none;
            padding-left: 9%;
        }

        #social-media ul li .youtube {
            padding-left: 0;
        }

        .follow {
            margin-left:10%;

        }
        
        #youtube {
            height: auto;
            width: 2vw;
        }
        
        #instagram {
            height:auto;
            width: 3vw;
        }

        #gitea {
            height:auto;
            width: 3vw;
        }
        
        #row2 {
            color: white;
            grid-column: 2/4;
            margin-top:5%;
        }
        
        #row2 p {
            text-align: center;
            padding-top:2%;
            cursor: pointer;
        }

        .arrow .down {
            display:none;
        }
    
        #dropdown {
            display:none;
        }
    
        .ham-btn {
            display:none;
        }
    
        .hamburger {
            display: none;
        }
    
        .hamburger-icon {
            display: none;
        }
    
        #mobile-dropdown-container {
            display: none;
        }

        #name {
            display:none;
        }

/*Content-section*/

    #content {
        display: grid;
        grid-template-columns: 100%; 
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: 
        "elevator"
        "experiments"
        "spider"
        "permaculture"
        "greentech"
        "about"
        "news";
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        grid-gap: 0.2em;
        width: 100%;
    }

    .section1 {
        grid-area: elevator;
        color: white;
        display:grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 25% 25% 25% 25%;
        height: 65vh;
        width: 100vw;
    }

    .section1 #title {
        grid-column: 1;
        grid-row: 1/4;
        display:flex;
        align-items: center;
        justify-content: center;
    }

    .section1 #title h3 {
        height:auto;
        color: #000;
        font-size: 5vw;
        padding-left:.1em;
        text-shadow: 5px 5px #fff;
        text-transform: uppercase;
        font-family: 'IBM Plex Sans', sans-serif;
    }

    .section1 #slogan {
        grid-column: 1;
        grid-row: 3/4;
        margin-bottom: 0;
        margin-top: 5vh;
        display: flex;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
    }

    .section1 #slogan:hover {
        opacity: 60%;
    }

    .section1 #slogan h2 {
        font-size: 6vh;
        text-transform: uppercase;
        z-index:2;
        color: transparent;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #000;
        font-family: 'IBM Plex Sans', sans-serif;
        text-align: center;
        padding-top: 5vh;
        transition: ease-in-out 2s;
    }

    .section1 #slogan a {
        text-decoration: none;
        display: flex;
        flex-direction: column;
    }

    .section1 #slogan h2:hover {
        color: hsl(160, 51%, 49%);
    }

    .section1 #slogan .fa-caret-down {
        color: #000;
        font-size: 6vh;
        align-self: center;
        cursor: pointer;
        transition: ease .2s;
    }

    .section1 #slogan .fa-caret-down:hover {
        opacity:50%;
    }

    .section1 #product {
        grid-column: 2;
        grid-row: 1/5;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #product a {
        padding-top: 10vh;
    }

    #product img {
    min-height: 50vh;
    opacity: 85%;
    }


    .section1 #image {
        grid-column: 1/5;
        grid-row: 1/5;
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top:0;
        z-index: -1;
        width: 120vw;
    }

    .section1 #image #leaves {
        width: 100%;
        height: auto;
        opacity:1;
        z-index:-1;
        opacity: 50%;
    }

    .section1 #about {
        grid-column:1;
        grid-row: 3/4;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 5vh;
        display:none;
    }

    .section1 #about a {
        text-decoration: none;
        color: #fff;
        padding: 5px 5px 5px 5px;
        font-size: 2.5em;
        text-shadow: 1px 1px rgb(0, 255, 170); 
        font-weight:600;
        transition: .5s;
        text-transform: uppercase;
    }

        .section1 #about a:hover{
            color:magenta;
            opacity: 50%;
        }

        .section1 #about a:active{
            color:magenta;
            opacity: 50%;
        }

    .section1 #about .fas {
        color: magenta;
    }

    .pages-container {
        background-color: #333;
        padding-top: 2.5vh;
    }

    .strip {
        background-color: white;
        border-radius: 25px;
        z-index: 10000;
        margin: 5vh;
    }

    .section2 {
        grid-area:experiments;
        color:#333;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 25% 25% 25% 25%;
        min-height: 90vh;
        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
        border-radius: 25px;
        padding: 1.5vh 0;
    }

    .section2 .image-slider {
        grid-column: 2;
        grid-row: 1/5;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .slider-items {

        align-self: center;
        padding-top: 1em;
    }

    .section2 .slider-items .item img {
        max-width: 100%;
        display: block;
        border: .5em solid white;
        margin: 1em;
    }

    .item #sample{
        max-width: 30vh;
    } 

    .section2 .slider-items .item {
        display: none;
    }

    .section2 .slider-items .item.active {
        display: block;
    }

    .section2 .image-slider .left-slide {
        background-color: transparent;
        border-radius: 50%;
        position:absolute;
        height:50px;
        width:50px;
        top:50%;
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top: -20px;
        left: 10%;
        cursor: pointer;
        transition: all .5s ease;
    }

    #dark{
        font-size: 2em;
        color: #333;
    }

    .section2 .image-slider .left-slide:hover {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }

    .section2 .image-slider .right-slide {
        background-color: transparent;
        border-radius: 50%;
        height:50px;
        width:50px;
        top: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        margin-top: -20px;
        right:10%;
        cursor: pointer;
        transition: all .5s ease;
    }

    .fas.fa-angle-right {
        font-size: 2em;
        color: #333;
    }

    .section2 .image-slider .right-slide:hover {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }

    .section2 h1 {
        grid-column: 1;
        grid-row: 1;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 10vh;
        line-height: 80px;
        letter-spacing: .5px;
        padding: 6vh 0 4vh 8vh;
        text-transform: uppercase;
        font-weight: 800;
        display: flex;
        align-self: center;
        color: white;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
    }

    .section2 p {
        grid-column: 1;
        grid-row: 2/3;
        font-size: 2.65vh;
        padding: 1.75rem 3.5rem;
        color: rgb(62, 190, 147);
        line-height: 6vh;
        text-align: center;
    }

    .section2 .page-button {
        grid-column:1 ;
        grid-row: 4;
        display:flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 5vh;
    }

    .section2 .page-button a {
        text-decoration: none;
        background-color: #fff;
        color: #000;
        border: .01em solid #000;
        padding: .35em 1.5em;
        border-radius: 25px;
        text-align: center;
        font-size: 1.45rem;
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 390;
        text-transform: uppercase;
        transition: all .5s ease;
        align-self: center;
    }

    .section2 .page-button a:hover {
        opacity: 50%;
        color: hsl(160, 51%, 80%);
    }

    #black {
        background-color: black;
        border-radius: 25px;
        z-index: 10000;
        min-height: 90vh;
        margin: 5vh;
    }


    .section3 {
        grid-area:spider;
        color: #eee;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 25% 25% 25% 25%;
        min-height: 95vh;
        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
        border-radius: 25px;
        padding: 1.5vh 0;
    }

    .section3 .spider-slider {
        grid-column: 2;
        grid-row: 1/5;
        max-width: 700px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }


    .section3 .spider-items .item img {
        max-width: 35vw;
        display: flex;
        align-self: center;
        justify-self: center;
    }

    .section3 .spider-items .item {
        display: none;
    }

    .section3 .spider-items .item.active {
        display: block;
    }

    .section3 .spider-slider #spider-left {
        background-color: transparent;
        border-radius: 50%;
        position:absolute;
        height:50px;
        width:50px;
        top:50%;
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top: -20px;
        left: 3%;
        cursor: pointer;
        transition: all .5s ease;
    }

    .fas.fa-angle-left {
        font-size: 2em;
        color: #eee;
    }

    .section3 .spider-slider #spider-left:hover {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }

    .section3 .spider-slider #spider-right {
        background-color: transparent;
        border-radius: 50%;
        height:50px;
        width:50px;
        top: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        margin-top: -20px;
        right: 3%;
        cursor: pointer;
        transition: all .5s ease;
        /*SlideShow Javascript!!!*/
    }

    .fas.fa-angle-right {
        font-size: 2em;
        color: #eee;
    }

    .section3 .spider-slider #spider-right:hover {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }

    .section3 h1 {
        grid-column: 1;
        grid-row: 1;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 10vh;
        line-height: 80px;
        letter-spacing: .5px;
        text-transform: uppercase;
        display: flex;
        align-self: center;
        justify-self: center;
        padding: 6vh 0 4vh 8vh;
        color: #000;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #fff;
    }

    .section3 p {
        grid-column: 1;
        grid-row: 2/3;
        font-size: 1.25rem;
        padding: 2vh 5vh;
        color: hsl(160, 51%, 60%);
        line-height: 6vh;
        font-weight: 400;
        text-align: center;
    }
    
    .section3 .page-button {
        grid-column:1 ;
        grid-row:4;
        display:flex;
        align-items: center;
        justify-content: center;
        padding-top: 3.5rem;
        padding-bottom: 5vh;
    }
    
    .section3 .page-button a {
        text-decoration: none;
        background-color: #000;
        border: .01em solid #fff;
        color: #fff;
        padding: .35em 1em;
        border-radius: 27px;
        text-align: center;
        font-size: 1.5em;
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 390;
        text-transform: uppercase;
        transition: ease .5s ;
        align-self: center;
    }

    .section3 .page-button a:hover {
        color: hsl(160, 51%, 80%);
    }

    .section4 {
        grid-area: permaculture;
        color: #333;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: 25% 25% 25% 25%;
        min-height: 95vh;
        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
        border-radius: 25px;
        padding: 1.5vh 0;
    }

    .section4 .image-slider {
        grid-column: 1;
        grid-row: 1/5;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .section4 .slider-items .item img {
        max-height: 60vh;
        display: flex;
        align-self: center;
        justify-self: center;
    }

    .section4 .slider-items .item {
        display: none;
    }

    .section4 .slider-items .item.active {
        display: block;
    }

    .section4 .image-slider .left-slide {
        background-color:black;
        border-radius: 50%;
        position:absolute;
        height:50px;
        width:50px;
        top:50%;
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top: -20px;
        left:15%;
        cursor: pointer;
        transition: all .5s ease;
        display:none; /*SlideShow Javascript!!!*/
    }

    .fas.fa-angle-left {
        font-size: 2em;
    }

    .section4 .image-slider .left-slide:hover {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }

    .section4 .image-slider .right-slide {
        background-color:black;
        border-radius: 50%;
        height:50px;
        width:50px;
        top: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        margin-top: -20px;
        right:15%;
        cursor: pointer;
        transition: all .5s ease;
        display:none; /*SlideShow Javascript!!!*/
    }

    .fas.fa-angle-right {
        font-size: 2em;
    }

    .section4 .image-slider .right-slide:hover {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }

    .section4 h1 {
        grid-column: 2;
        grid-row: 1;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 9.5vh;
        line-height: 80px;
        letter-spacing: .5px;
        padding: 6vh 6vh 4vh 0;
        text-transform: uppercase;
        font-weight: 800;
        display: flex;
        align-self: center;
        justify-self: center;
        color: white;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
    }


    .section4 p {
        grid-column: 2;
        grid-row: 2/3;
        font-size: 1.25rem;
        line-height: 6vh;
        padding: 2em;
        color: rgb(62, 190, 147);
        font-weight: 300;
        text-align: center;
        justify-self: center;
    }

    .section4 .page-button {
        grid-column:1 ;
        grid-row:3;
        display:flex;
        align-items: center;
        grid-column: 2;
        grid-row: 4;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 5vh;
    }

    .section4 .page-button a {
        text-decoration: none;
        background-color: #fff;
        color: #000;
        border: 0.01em solid #000;
        padding: .25em 1em;
        border-radius: 27px;
        text-align: center;
        font-size: 1.5em;
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 390;
        text-transform: uppercase;
        margin-top: 6vh;
        transition: ease .5s ;
    }

    .section4 .page-button a:hover {
        opacity: 90%;
        background-color:hsl(160, 50%, 90%)
    }


    .section5 {
        grid-area:greentech;
        color: #eee;
        display:grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: 25% 25% 25% 25%;
        min-height: 90vh;
        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
        border-radius: 25px;
        padding: 1.5vh 0;
    }

    .section5 .image-slider {
        grid-column: 1;
        grid-row: 1/5;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        align-self: center;
    }

    .section5 .slider-items .item img {
        max-height: 60vh;
        display: flex;
        align-self: center;
        justify-self: center;
    }

    .section5 .slider-items .item {
        display: none;
    }

    .section5 .slider-items .item.active {
        display: block;
    }

    .section5 .image-slider .left-slide {
        background-color:black;
        border-radius: 50%;
        position:absolute;
        height:50px;
        width:50px;
        top:50%;
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top: -20px;
        left:10%;
        cursor: pointer;
        transition: all .5s ease;
        display: none;
    }

    .fas.fa-angle-left {
        font-size: 2em;
    }

    .section5 .image-slider .left-slide:hover {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }

    .section5 .image-slider .right-slide {
        background-color:black;
        border-radius: 50%;
        height:50px;
        width:50px;
        top: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        margin-top: -20px;
        right:10%;
        cursor: pointer;
        transition: all .5s ease;
        /*SlideShow Javascript!!!*/
        display: none;
    }

    .fas.fa-angle-right {
        font-size: 2em;
    }

    .section5 .image-slider .right-slide:hover {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }

    .section5 h1 {
        grid-column: 2;
        grid-row: 1;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 10vh;
        line-height: 80px;
        letter-spacing: .5px;
        text-transform: uppercase;
        display: flex;
        align-self: center;
        justify-self: center;
        padding:  6vh 6vh 4vh 0;
        color: #000;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #fff;
    }

        .section5 p {
            grid-column: 2;
            grid-row: 2/3;
            font-size: 1.25rem;
            line-height: 6vh;
            padding: 3.25rem 3.5rem 3rem 0;
            color: hsl(160, 51%, 60%);
            font-weight: 400;
            text-align: center;
            justify-self: center;
        }
    
    .section5 .page-button {
        grid-column:2 ;
        grid-row:4;
        display:flex;
        align-items: center;
        justify-content:center;
        padding-bottom: 6vh;
        padding-right: 1.5em;
    }
    
    .section5 .page-button a {
        text-decoration: none;
        background-color: #000;
        color: #fff;
        border: 0.01em solid #fff;
        padding: .35em 1.5em;
        border-radius: 27px;
        text-align: center;
        font-size: 1.35em;
        font-family: 'IBM Plex Sans', sans-serif;
        text-transform: uppercase;
        font-weight: 390;
        margin: 1em;
        transition: ease .5s ;
    }

    .section5 .page-button a:hover {
        opacity: 90%;
        color: hsl(160, 100%, 90%);
    }

    .section6 {
        grid-area: about;
        color: #eee;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 25% 25% 25% 25%;
        min-height: 90vh;
        box-shadow: 1px 1px 5px 3px rgb(0, 255, 170);
        border-radius: 25px;
        padding: 5vh 0 0 0;
    }

    .section6 .image-slider {
        grid-column: 2;
        grid-row: 1/4;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .section6 .slider-items .item img {
        max-height: 60vh;
        display: flex;
        align-self: center;
        justify-self: center;
    }

    .section6 h1 {
        grid-column: 1;
        grid-row: 1;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 10vh;
        line-height: 80px;
        letter-spacing: .5px;
        padding: 1em 0 .5em 0;
        margin-left: .1em;
        text-transform: uppercase;
        display: flex;
        align-self: center;
        justify-self: center;
        padding-top: 4rem;
        color: #000;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #fff;
    }

    .section6 p {
        grid-column: 1;
        grid-row: 2/3;
        font-size: 1.25rem;
        padding: 2.5em 3.5rem 1.5rem 3.5rem;
        color: hsl(160, 51%, 60%);
        line-height: 6vh;
        font-weight: 400;
        text-align: center;
        justify-self: center;
    }

    .section6 .page-button {
        grid-column: 1 ;
        grid-row: 4;
        display:flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 5vh;
    }

    .section6 .page-button a {
        text-decoration: none;
        background-color:#000;
        color:#fff;
        border: 0.01em solid #fff;
        padding: .25em 1em;
        border-radius: 27px;
        text-align: center;
        font-size: 1.5em;
        font-family: 'IBM Plex Sans', sans-serif;
        margin: 1em;
        font-weight: 390;
        text-transform: uppercase;
        transition: ease .5s;
    }

    .section6 .page-button a:hover {
        opacity: 90%;
        color: hsl(160, 51%, 80%);
    }

    .section7 {
        grid-area: news;
        color:black;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .2fr 1fr;
        padding: 2vh 5vh 5vh 5vh;
        height: 105vh;
    }

    .section7 h1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        grid-row:1;
        margin-left: 5rem;
        color: #fff;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #000;
        font-size: 7vh;
        font-weight: 200;
    }

    .section7 .news {
        grid-row: 2/4;
        max-width: 85vw;
    }

    .news h3 {
        font-size: 2.5rem;
        line-height: 3rem;
        color: rgb(62, 190, 147);
        margin: 2.5rem 0 3rem 1.5rem;
        text-transform: uppercase;
        font-family:'IBM Plex Sans', sans-serif;
        grid-row: 1;
        font-weight: 100;
    }

    .news img {
        width: 45vh;
        margin-bottom: 3vh;
    }


    .news p {
        text-align: center;
        margin: 1rem;
    }

    #insta {
        padding: 0;
        background-color:transparent;
        border: none;
        cursor: pointer;
        transition: .3s;
        margin-top: 0;
        margin-left: 0;
        transition: .5s;
    }

    #you {
        padding: 0;
        background-color:transparent;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: .3s;
        margin-top: 0;
        margin-left: 0;
        transition: .5s;
    }

    .social {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr ;
        grid-template-rows: .5fr .5fr .5fr .5fr;
        align-items: center;
        box-shadow: 1px 1px 3px 5px #999;
        min-height: 80vh;
        grid-gap: 2.5vh;
        box-shadow: 1px 1px 5px 3px hsl(160, 100%, 90%);
        padding: 2rem;
        height: 80vh;
        border-radius: 25px;
    }

    #post_1 {

        grid-column: 1;
        grid-row: 2;
        max-width: 25vw;
    }

    #post_2 {

        grid-column: 2;
        grid-row: 2;
        max-width: 25vw;
    }

    #post_3 {

        grid-column: 3;
        grid-row: 2;
        max-width: 25vw;
    }

    .social h5 {
        grid-column: 1/3;
        grid-row: 1;
        justify-self: flex-start;
        font-size: 5vh;
        font-family:'IBM Plex Sans', sans-serif;
        text-transform: uppercase;
        padding: 1vh;
        font-weight: 200;

    }

    .social .instagram {
        grid-column: 1/3;
        grid-row: 3;
        display: flex;
        padding-left: 2vh;
    }

    .social .instagram a {
        display:flex;
        text-decoration: none;
        color: #333;
    }

    #gram {
        width: 8vh;
        margin-right: 5vh;
        transition: all 0.5s ease;
        margin-bottom: 0 !important;
        filter: opacity(0.5);
    }

    #gram:hover, #gram:active {
        background-color: hsl(160, 100%, 80%) !important;
        border-radius: 50%;
        filter:opacity(1);
    }

    .social .instagram #account {
        font-size: 1.75rem;
        align-self: center;
        text-shadow: none;
        font-weight: 100;
    }

    .social .instagram #account:hover {
        opacity: 50%;
    }

    .social .youtube {
        grid-column: 1/3;
        grid-row: 4;
        display: flex;
        padding-left: 2vh;
        margin: 0;
    }

    .social .youtube a {
        display:flex;
        text-decoration: none;
        color: #333;
    }

    #tube {
        width: 7vh;
        margin-right: 5vh;
        transition: all 0.5s ease;
        filter: opacity(0.5)
    }

    #tube:hover {
        background-color: hsl(300, 100%, 80%);
        border-radius: 50%;
        filter: opacity(1);
    }


    .social .youtube #account {
        font-size: 1.75rem;
        align-self: center;
        text-shadow: none;
        font-weight: 100;
    }

    .social .youtube #account:hover {
        opacity: 50%;
    }

    .social button {
        padding: .5rem 1.25rem;
        background-color: transparent;
        border: none;
        font-size: 1.25rem;
        font-family:'Fira Sans', sans-serif;
        line-height: 1rem;
        border-radius: 50%;
        font-weight: 600;
        cursor: pointer;
        transition: .3s;
        margin-top: 1rem;
        margin-left: .25rem;
        transition: .5s;
    }

    .social button a {
        text-decoration: none;
        color: white;
    }
}

/* Adjust Media Queries ! */

@media (max-width: 768px) {

    body {
        background-color: white;
    }

    .top-bar {
        display: none;
        }

    .main-navigation-bar {
        display: none;
    }

    .wrapper {
        grid-template-columns: 100%; 
        grid-template-rows: auto auto auto;
        grid-template-areas: 
        "main-bar"
        "main"
        "footer";
        font-family: 'Fira Sans', sans-serif;
        font-weight:500;
        display:grid;
    }
    
    #main-bar {
        grid-area: main-bar;
        background-color: black;
        display: flex;
        justify-content: flex-start;
        border-bottom: 3px solid  rgb(62, 190, 147);
        padding: 0 0;
    }

    .logo {
        width: auto;
        height: 17.5vh;
        padding: 1vh 0 0 .5vh;
    }

    #main-bar h3 {
            color: white;
            text-transform: uppercase;
            padding-top:0;
            font-size: 13px;
            margin-left:10%;
            margin-bottom: 10%;
            font-weight: 300;
            display: none;
    }

    .hamburger-wrap {
        float: right;
        padding-top:0;;
        width: 80vw;
        margin-right: 1vh;
        align-self: center;
    }
                    
                .hamburger {
                    padding: 25px 25px !important;
                    display:block;
                    float:right;
                    cursor:pointer;
                }
            
            .hamburger .hamburger-icon {
                width: 7.5vw;
                height: 2.5px;
                background-color:white;
                display: block;
                position:relative;
            }
                            
                .hamburger .hamburger-icon::before,
                .hamburger .hamburger-icon::after {
                    content:'';
                    width:100%;
                    height:100%;
                    background-color: white;
                    display: block;
                    position:absolute;
                }
            
                    .hamburger .hamburger-icon::after {
                        top: -7px;
                    } 
                                    
                    .hamburger .hamburger-icon::before {
                        top: 7px;
                    } 
            
                .ham-btn {
                    display:none;
                }
                             
                    .ham-btn:checked .hamburger .hamburger-icon {
                        transform: rotate(45deg); 
                    }

    #mobile-dropdown-container {
        background-color: black;
        position: absolute;
        width: 100%;
        display: block;
        z-index: 2;
        padding-bottom: 0;
        margin-left:0;
    }
                        
    #mobile-dropdown {
        margin: 1em;
        display: none;
    }
                        
    #mobile-dropdown ul {
        list-style:none;
    }
                        
    #mobile-dropdown ul li {
        margin: 2vh 0 5vh 0;
        display:flex;
        flex-direction: column;
    }
                    
    #mobile-dropdown ul li a {
        color :white;
        text-decoration:none;
        font-size: 3vh;
        font-weight: 700;
        line-height: 1.8em;
        justify-self: center;
        align-self: center;
    }

    #mobile-dropdown ul li a:hover ,#mobile-dropdown ul li a:active {
        color:  rgb(0, 255, 170);
    }
                        
    #mobile-dropdown ul li ul li a {
        color: white;
    }

    .drop {
        display: flex;
        justify-self: center;
        align-self: center;
    }
                        
    #down li {
        margin: 1vh 0 2vh 0 !important;
    }
                        
    #down li a {
        margin-bottom: 0 !important;
    }
                    
    .languages a {
        color: white;
        font-size: 10px;
    }

    .languages a:active {
        color:  rgb(0, 255, 170);
    }
                    
                    .arrow {
                        border: solid white;
                        border-width: 0 2px 2px 0;
                        display: inline-block;
                        padding: 3px;
                        cursor: pointer;
                        transition: .1s;
                    }
                            
                            .down {
                                transform: rotate(45deg);
                            }

                            
    main {
        grid-area: main;        
    }
            
    footer {
        grid-area:footer;
        background-color: yellow;
    }

        #footer-wrapper {
            grid-template-columns: 50% 50%;
            grid-template-rows: .5fr 0.1fr 0.1fr 0.1fr 0.1fr;
            display: grid;
            background-color:black;
        }

            #column1 {
                grid-row: 1;
                grid-column: 1;
                display: flex;
                justify-content: center;
            }

            #footer-logo {
                width:80%;
                height:auto;
                text-align: center;
                padding-left: 20%;
                padding-top: 1%;
                padding-right: 20%;
                padding-bottom:1%;
            }
            
            #column1 a {
                color: white;
                text-decoration: none;
                text-transform: uppercase;
                margin-left: 0;
                font-size:100%;
                padding-top:5%;
                padding-bottom:5%;
                display:flex;
            }
            
            #column1 a:hover {
                color: #4dff88;
            }

    #column2 {
        grid-column:1/3;
        grid-row: 2;
        margin-top:0;
        border-top:1px solid white;
        padding: 5% 7.5% 5% 5%;
        border-bottom:1px solid white;
    }

    #column2 ul {
        display:none;
        position: relative;
        width:100%; 
        overflow:auto;
        z-index: 1;
        list-style : none;
        flex-direction: column;
        text-align: center;
        box-shadow: 1px 1px 3px 1px hsl(160, 100%, 50%);
        border-radius: 25px;
        padding: .9em;
    }

    #column2 ul li p a {
        text-decoration:none;
        color:white;
    }

    #column2 ul li p a:active {
        color: hsl(160, 100%, 50%);
        filter: blur(1px);
    }
                
    #column2 ul li {
        margin: .5em 0;
    }
                
    h6 {
        font-size: 2vh;
        padding-bottom: 6%;
        text-transform: uppercase;
        color:white;
        display: flex;
        justify-content: space-between;
    }

    .arrow {
        border: solid white;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transition: .2s;
    }
                
    .down {
        transform: rotate(45deg);
        position: relative;
        margin-left: 55%;        
    }
                
    .down2 {
        transform: rotate(45deg);
        position: relative;
        margin-left:73%;
    }            

    #column3 {
        grid-column: 1/3;
        grid-row: 3;
        margin-top:0;
        border-top:1px solid white;
        padding-top:5%;
        padding-bottom:4%;
        padding-left: 5%;
        padding-right: 5%;
        border-bottom:1px solid white;
    }

    #column3 ul {
        display:none;
        position: relative;
        width:100%; 
        overflow:auto;
        z-index: 1; 
        list-style : none;
        box-shadow: 1px 1px 3px 1px hsl(160, 100%, 50%);
        border-radius: 25px;
        padding: .5em;
        text-align: center;
        justify-content: space-evenly;
    }

    #column3 ul li {
        margin: .5em 0;
    }
        
    #column3 ul li p a {
        text-decoration:none;
        color:white;
    }

            #column4 {
                grid-column: 1/3;
                grid-row:4;
                border-bottom: solid white 1px;
            }

            #column4 p {
                display:flex;
                align-items: center;
                justify-content: space-evenly;
                padding-bottom: 1%;
                padding-top: 1%;
                color:white;
                font-size:100%;
            }
            
            #column4 h6 {
                display:none;
            }

            #column5 {
                grid-column:2;
                grid-row: 1;
                margin-top:15%;
                padding-bottom: 10%;
                display:flex;
                align-items: center;
            }

    #social-media ul li {
        display:inline;
        list-style-type: none;
        padding-left: 2.5vh;
        padding-bottom: 5%;
    }
                
    #column5 h6 {
        display:none;
    }
                
    #gitea {
        width: 5vh;
        height:auto;
    }

    #gitea:active, #gitea:hover {
        filter: blur(.75px);
    }

    #youtube {
        height: auto;
        width: 4vh;
    }

    #youtube:active, #youtube:hover {
        filter: blur(.75px);
    }
                
    #instagram {
        height:auto;
        width: 5vh;
    }

    #instagram:active, #instagram:hover {
        filter: blur(.75px);
    }

                #row2 {
                    grid-column:1;
                    grid-row:5;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    margin-top:0;
                    margin-bottom:5%;
                    margin-top:5%;
                    background-color: black;
                }

                #row2 p {
                    align-items: center;
                    padding-top:0;
                    font-size: 50%;
                    color:white;
                }

    #row3 {
        grid-column: 2;
        grid-row: 5;
    }

    /*Content Section*/

    #content {
        display: grid;
        grid-template-columns: 100%; 
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: 
        "elevator"
        "experiments"
        "spider"
        "permaculture"
        "greentech"
        "about"
        "news";
        font-family: 'Fira Sans', sans-serif;
        font-weight:500;
        grid-gap: 0.2em;
        width: 100%;
    }

        .section1 {
            grid-area: elevator;
            color: white;
            border-top: 3px solid white;
            display:grid;
            grid-template-columns: 50% 50%;
            grid-template-rows: 20% 25% 25% 30%;
            grid-gap: 0.2em;
            width: 100%;
            height: 75vh;
        }
        
        .section1 #title {
            grid-column: 1/3;
            grid-row: 1/3;
            display:flex;
            align-items: center;
            justify-content: center;
        }

        .section1 #title h3 {
            height:auto;
            color: #000;
            font-size: 6.5vh;
            font-family: 'IBM Plex Sans', sans-serif;
            text-shadow: 5px 5px hsl(300, 100%, 80%);
            text-transform: uppercase;
        }
        
        .section1 #slogan {
            grid-column: 1/3;
            grid-row: 3/5;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-top: 7.5vh;
            cursor: pointer;
        }

        .section1 #slogan a {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            align-items: center;
        }

        .section1 #slogan h2 {
            font-size: 4.5vh;
            text-transform: uppercase;
            padding-right: .1em;
            padding-bottom:1vh;
            color: #000;
            font-family: 'IBM Plex Sans', sans-serif;
            text-align: center;
            padding-top: 5vh;
            transition: ease;
        }

        .section1 #slogan h2:active {
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: hsl(160, 51%, 60%);
        }

        .section1 #slogan a .fa-caret-down {
            color: #000;
            font-size: 7vh;
            justify-self: center;
        }

        .section1 #slogan a .fa-caret-down:active {
            color: hsl(160, 51%, 49%);
        }

        
        .section1 #image {
            grid-column: 1/3;
            grid-row:1/5;
            display:flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            margin-top:0;
            z-index: -1;
        }
        
    .section1 #image #leaves {
        width: auto;
        height: 85vh;
        z-index:-1;
        opacity: 35%;
    }

        .section1 #about {
            grid-column:1;
            grid-row: 4;
            align-self: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding-bottom: 1.5em;
            display: none;
        }


    .section1 #about a {
        text-decoration: none;
        color: hsl(300, 100%, 80%);
        padding: 5px 5px 5px 5px;
        font-size: 3.5vh;
        text-shadow: .75px .75px #000; 
        font-weight:600;
        text-transform: uppercase;
        margin-left: 1.5vh;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .section1 #about a .svg-inline--fa.fa-w-14 {
        color: hsl(300, 100%, 80%);
        cursor: pointer;
    }

    .section1 #about a .svg-inline--fa.fa-w-14:active  {
            filter: blur(.5px);
            color: hsl(160, 100%, 80%);
        }

        .section1 #about a:active {
            filter : blur(.5px)
        }   

    .section1 #product {
        grid-column: 1/3;
        grid-row: 3/4;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 7.5vh;
    }

    .section1 #product a {
        cursor: pointer;
    }

    .section1 #product img {
        max-height: 40vh;
    }

    .pages-container {
        background-color: #000;
        padding-top: 2vh;
        overflow-x: hidden;
    }
    
    .strip {
        background-color: white;
        border-radius: 25px;
        z-index: 10000;
        min-height: 90vh;
        margin: 5vh;
    }
    
    
    .section2 {
        grid-area:experiments;
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows:auto auto auto auto;
        padding-top: 2vh;
        margin-bottom: .5em;
        width: 100%;
        min-height: 95vh;
        color: rgb(62, 190, 147);
        font-weight: 600;
    }

    .section2 .image-slider {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        justify-content: center;
        position: relative;
        width: 25vh;
        height: 35vh;
        justify-self: center;
    }

    
    .section2 .slider-items .item img {
        max-width: 100%;
        display: flex;
        position: absolute;
    }

    .section2 .slider-items .item #sample {
        max-width: 30vw;
        padding-top: 10vh;
    }
    
    .section2 .slider-items .item {
        display: none;
    }
    
    .section2 .slider-items .item.active {
        display: flex;
        justify-self: center;
        align-self: center;
        justify-content: center;
    }
    
    .section2 .image-slider .left-slide {
        background-color: transparent;
        border-radius: 50%;
        position:absolute;
        height: 45px;
        width: 45px;
        top:50%;
        display:flex;
        justify-content: center;
        align-items: center;
        right: 23vh;
        cursor: pointer;
        transition: all .5s ease;
    }
    
    .fas.fa-angle-left {
        font-size: 2em;
        color: #fff;
    }
    
    .section2 .image-slider .left-slide:active {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }
    
    .section2 .image-slider .right-slide {
        background-color:transparent;
        border-radius: 50%;
        height: 45px;
        width: 45px;
        top: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        left: 23vh;
        cursor: pointer;
        transition: all .5s ease;
    }
    
    .fas.fa-angle-right {
        font-size: 2em;
        color: #fff;
    }
    
    .section2 .image-slider .right-slide:active {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }
    
    .section2 h1 {
        grid-column: 1;
        grid-row: 2;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 5vh;
        letter-spacing: .5px;
        padding-top: 1vh;
        text-transform: uppercase;
        text-align: center;
        color: #000;
    }
    
    
    .section2 p {
        grid-column: 1;
        grid-row: 3;
        font-size:2.5vh;
        padding: .5vh 3vh;
        padding-bottom: 0;
        text-align: center;
        line-height: 1.5;
        font-weight: 200;
    }

    #desktop {
        display: none;
    }
    
    .section2 .page-button {
        grid-column:1 ;
        grid-row:4;
        display:flex;
        align-items: center;
        justify-content: center;
        margin: 2.5vh 0 5vh 0;
        transition: all .5s ease;
    }
    
    .section2 .page-button a {
        text-decoration: none;
        background-color: #000;
        color:white;
        padding: .75vh 2.75vh;
        margin-left: 1vh;
        border-radius: 27px;
        margin-right: 4%;
        text-align: center;
        font-size: 3.5vh;
        font-family: 'IBM Plex Sans', sans-serif;
        text-transform: uppercase;
        font-weight: 390;
    }

    .section2 .page-button a:active {
        opacity: 50%;
        background-color: hsl(160, 51%, 80%);
        color: #333;
    }

    .strip2 {
        background-color: #fff;
        border-radius: 25px;
        z-index: 10000;
        min-height: 90vh;
        margin: 5vh;
    }

    .section3 {
        grid-area:spider;
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows:auto auto auto auto;
        padding-top: 2vh;
        margin-bottom: .5em;
        color: #0000;
        width: 100%;
        min-height: 95vh;
    }

    .section3 .spider-slider {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        justify-content: center;
        position: relative;
        width: 40vh;
        height: 30vh;
        justify-self: center;
    }
    
    .section3 .spider-items .item img {
        max-width: 100%;
        display: flex;
        position: absolute;
    }
    
    .section3 .spider-items .item {
        display: none;
    }
    
    .section3 .spider-items .item.active {
        display: flex;
        justify-self: center;
        align-self: center;
        justify-content: center;
    }

    #pic1 {
        height: 35vh;
        width: 40vh;
    }
    
    .section3 .spider-slider #spider-left {
        background-color: transparent;
        border-radius: 50%;
        position:absolute;
        height: 45px;
        width: 45px;
        top:50%;
        display:flex;
        justify-content: center;
        align-items: center;
        left: -3.5vh;
        cursor: pointer;
        transition: all .5s ease;
        display: none;
    }
    
    .fas.fa-angle-left {
        font-size: 2em;
        color: #999;
    }

    .fas.fa-angle-left:active {
        opacity: 50%;
        color: rgb(0, 255, 170);
    }
    
    .section3 .spider-slider #spider-left:active {
        box-shadow: 0px 0px 10px magenta;
    }
    
    .section3 .spider-slider #spider-right {
        background-color: transparent;
        border-radius: 50%;
        height:45px;
        width: 45px;
        top: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        right: -5vh;
        cursor: pointer;
        transition: all .5s ease;
    }
    
    .fas.fa-angle-right {
        font-size: 2em;
        color:#999;
    }

    .fas.fa-angle-right:active {
        opacity: 50%;
        color: rgb(62, 190, 147);
    }
    
    .section3 .spider-slider #spider-right:active {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }
    
    .section3 h1 {
        grid-column: 1;
        grid-row: 2;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 5.5vh;
        letter-spacing: .5px;
        padding-top: 2vh;
        text-transform: uppercase;
        text-align: center;
        color: #000;
    }
    
    .section3 p {
        grid-column: 1;
        grid-row: 3;
        font-size:2.5vh;
        padding: .5vh 3vh;
        padding-bottom: 0;
        text-align: center;
        color: rgb(62, 190, 147);
        font-weight: 600;
        line-height: 1.5;
    }
    
    .section3 .page-button {
        grid-column:1 ;
        grid-row:4;
        display:flex;
        align-items: center;
        justify-content: center;
        margin:1.5vh 0;
    }
    
    .section3 .page-button a {
        text-decoration: none;
        background-color:#000;
        color:white;;
        padding: .75vh 2vh;
        margin-left: 1vh;
        border-radius: 27px;
        margin-right: 4%;
        text-align: center;
        font-size: 3.5vh;
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
    }
    
    .section4 {
        grid-area:permaculture;
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows:auto auto auto auto;
        padding-top: 2.5vh;
        margin-bottom: .5em;
        color:#000;
        width: 100%;
        height: 98vh;
    }

    .section4 .image-slider {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 22.5vh;
        height: auto;
       justify-self: center;
    }
    
    .section4 .slider-items .item img {
        max-width: 100%;
        display: flex;
    }
    
    .section4 .slider-items .item {
        display: none;
    }
    
    .section4 .slider-items .item.active {
        display: block;
    }
    
    .section4 .image-slider .left-slide {
        background-color:black;
        border-radius: 50%;
        position:absolute;
        height:50px;
        width:50px;
        top:50%;
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top: -20px;
        right:30vh;
        cursor: pointer;
        transition: all .5s ease;
        display: none;
    }
    
    .fas.fa-angle-left {
        font-size: 2em;
    }
    
    .section4 .image-slider .left-slide:active {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }
    
    .section4 .image-slider .right-slide {
        background-color:black;
        border-radius: 50%;
        height:50px;
        width:50px;
        top: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        margin-top: -20px;
        left: 35vh;
        cursor: pointer;
        transition: all .5s ease;
        display: none;
    }
    
    .fas.fa-angle-right {
        font-size: 2em;
    }
    
    .section4 .image-slider .right-slide:active {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }
    
    .section4 h1 {
        grid-column: 1;
        grid-row: 2;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 4.5vh;
        letter-spacing: .5px;
        padding: 2.5vh 0 2vh 0;
        text-transform: uppercase;
        text-align: center;
        font-weight: 800;
    }
    
    .section4 p {
        grid-column: 1;
        grid-row: 3;
        font-size:2.5vh;
        padding: .5vh 3vh;
        padding-bottom: 0;
        text-align: center;
        color: rgb(62, 190, 147);
        font-weight: 600;
        line-height: 1.5;
    }

    .section4 p span {
        display: none;
    }
    
    .section4 .page-button {
        grid-column:1 ;
        grid-row:4;
        display:flex;
        align-items: center;
        justify-content: center;
        margin: 2vh 0 2.5vh 0;
    }
    
    .section4 .page-button a {
        text-decoration: none;
        background-color: #000;
        color:white;;
        padding: .75vh 2vh;
        border-radius: 27px;
        text-align: center;
        font-size: 3.5vh;
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
    }
    

    .section5 {
        grid-area:greentech;
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows:auto auto auto auto;
        padding-top: 2vh;
        margin-bottom: .5em;
        color: #000;
        width: 100%;
        height: 98vh;
    }

    .section5 .image-slider {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 22.5vh;
        height: auto;
        justify-self: center;
    }
    
    .section5 .slider-items .item img {
        max-width: 100%;
        display: flex;

    }
    
    .section5 .slider-items .item {
        display: none;
    }
    
    .section5 .slider-items .item.active {
        display: flex;
    }
    
    .section5 .image-slider .left-slide {
        background-color:black;
        border-radius: 50%;
        position:absolute;
        height:50px;
        width:50px;
        top:50%;
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top: -20px;
        right:30vh;
        cursor: pointer;
        transition: all .5s ease;
        display: none;
    }
    
    .fas.fa-angle-left {
        font-size: 2em;
    }
    
    .section5 .image-slider .left-slide:active {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }
    
    .section5 .image-slider .right-slide {
        background-color:black;
        border-radius: 50%;
        height:50px;
        width:50px;
        top: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        margin-top: -20px;
        left: 35vh;
        cursor: pointer;
        transition: all .5s ease;
        display: none;
    }
    
    
    .section5 .image-slider .right-slide:active {
        box-shadow: 0px 0px 10px rgb(0, 255, 170);
    }
    
    .section5 h1 {
        grid-column: 1;
        grid-row: 2;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 5vh;
        letter-spacing: .5px;
        padding-top: 1.5vh;
        text-transform: uppercase;
        text-align: center;
        font-weight: 800;
        display: flex;
        align-self: center;
        justify-self: center;
    }
    
    .section5 p {
        grid-column: 1;
        grid-row: 3;
        font-size: 2.5vh;
        padding: .5vh 3vh;
        padding-bottom: 0;
        color: rgb(62, 190, 147);
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
    }

    .section5 p span {
        display: none;
    }
    
    .section5 .page-button {
        grid-column:1 ;
        grid-row:4;
        display:flex;
        align-items: center;
        justify-content: center;
        margin:1vh 0;
        margin-bottom: 3vh;
    }
    
    .section5 .page-button a {
        text-decoration: none;
        background-color:#000;
        color:white;;
        padding: .75vh 2vh;
        border-radius: 27px;
        text-align: center;
        font-size: 3.5vh;
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
    }
    

    .section6 {
        grid-area:about;
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows:auto auto auto auto;
        padding-top: 2vh;
        margin-bottom: .5em;
        color: #000;
        width: 100%;
        height: 100vh;
    }

    .section6 .image-slider {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width:30vh;
        height: auto;
        justify-self: center;
    }
    
    .section6 .slider-items .item img {
        max-width: 100%;
        display: flex;
    }
    
    .section6 .slider-items .item {
        display: none;
    }
    
    .section6 .slider-items .item.active {
        display: flex;
    }
    
    .section6 h1 {
        grid-column: 1;
        grid-row: 2;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 5vh;
        letter-spacing: .5px;
        padding-top: 1vh;
        text-transform: uppercase;
        text-align: center;
        color: rgb(62, 190, 147);
    }
    
    .section6 p {
        grid-column: 1;
        grid-row: 3;
        font-size:2.5vh;
        padding: .5vh 3vh 0 3vh;
        text-align: center;
        font-weight: 600;
        color: #000;
        line-height: 1.5;
    }

    .section6 p span {
        display: none;
    }
    
    .section6 .page-button {
        grid-column:1 ;
        grid-row:4;
        display:flex;
        align-items: center;
        justify-content: center;
        margin:1vh 0 3vh 0;
    }
    
    .section6 .page-button a {
        text-decoration: none;
        background-color:rgb(62, 190, 147);
        color:white;;
        padding: .75vh 2vh;
        margin-left: 1vh;
        border-radius: 27px;
        margin-right: 4%;
        text-align: center;
        font-size: 3.5vh;
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
    }
    

    .section7 {
        grid-area: news;
        color: black;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows:.25fr 1fr 1fr 1fr;
    }

    .section7 h1 {
        color:#333;
        display: flex;
        justify-content: center;
        margin: 2.5vh;
        grid-column: 1;
        grid-row: 1;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 6vh;
        text-transform: uppercase;
    }

    .news {
        grid-row: 2/5;
    }

    .news h3 {
        font-size: 1.5rem;
        line-height: 3rem;
        color: rgb(62, 190, 147);
        margin: 1rem 0 0 1.5rem;
        text-transform: uppercase;
        font-family:'IBM Plex Sans', sans-serif;
    }
    
    .news img {
        width: 25vh;
        margin: 0 0 1rem 3rem;
    }
    
    .news h5 {
        color: black;
        text-shadow: 1.5px 3px rgb(62, 190, 147);
        font-size: 1.5rem;
        font-family:'IBM Plex Sans', sans-serif;
        text-transform: uppercase;
        margin-bottom: .5rem;
    }
    
    .news p {
        text-align: center;
        margin: .75rem;
    }
    
    .social {
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: .75fr .5fr .75fr .75fr;
        align-items: center;
        box-shadow: 1px 1px 5px 3px magenta;
        padding: 1rem;
        min-height: 80vh;
        border-radius: 25px;
    }
    
    .social h5 {
        grid-column: 1/3;
        grid-row: 1;
        justify-self: center;
    }
    
    .social .blog {
        grid-column: 1/3;
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .social .blog #blog {
        margin: 0;
    }
    
    .social .instagram {
        grid-column: 1/3;
        grid-row: 3;
        display: flex;
        justify-content: space-around;
    }

    #insta {
        padding: 0;
        background-color:transparent;
        border: none;
        cursor: pointer;
        transition: .3s;
        margin-top: 0;
        margin-left: 0;
    }
    
    #gram {
        width: 5vh;
        margin: 0;
        transition: .7s all ease;
    }

    #gram:active, #gram:hover {
        border-radius: 50px;
        background-color: hsl(160, 100%, 80%)
    }
    
    #you {
        padding: 0;
        background-color:transparent;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: .3s;
        margin-top: 0;
        margin-left: 0;
    }
    
    #gram {
        width: 9vh;
       
    }
    
    .social .instagram #account {
        font-size: 2vh;
        align-self: center;
        text-shadow: none;
    }
    
    .social .youtube {
        grid-column: 1/3;
        grid-row: 4;
        display: flex;
        justify-content: space-around;
    }
    
    #tube {
        width: 8vh;
        margin: 0;
        transition: .7s all ease;
    }

    #tube:active, #tube:hover {
        border-radius: 50px;
        background-color: hsl(300, 100%, 80%);
    }
    
    .social .youtube #account {
        font-size: 2vh;
        align-self: center;
        text-shadow: none;
    }
    
    
    .social button {
        padding: .5rem 1.25rem;
        background-color: black;
        border: none;
        font-size: 1.25rem;
        font-family:'Fira Sans', sans-serif;
        line-height: 1rem;
        border-radius: 25px;
        font-weight: 600;
        cursor: pointer;
        transition: .3s;
        margin-top: 1rem;
        margin-left: .25rem;
        transition: .5s;
    }
    
    .social button a {
        text-decoration: none;
        color: white;
    }
    
    .social button a:active {
        opacity: 50%;
        color: rgb(0, 255, 170);
    }
    
    .social #post {
        width: 40vh;
    }

    .desktop {
        display: none;
    }
}