* {
margin: 0;
padding: 0;
border: 0px;
text-decoration: none;
    text-size-adjust: none;
}

html {
  scroll-behavior: smooth;
}

a{
    color: inherit;
}

body{
    background-color: #F0F5F5;
}


/*-------------- FONTS ------------------*/

@font-face {
    font-family: 'besleybold';
    src: url('fonts/besley-bold-webfont.woff2') format('woff2'),
         url('fonts/besley-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleybold_italic';
    src: url('fonts/besley-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/besley-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleyregular';
    src: url('fonts/besley-book-webfont.woff2') format('woff2'),
         url('fonts/besley-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleyitalic';
    src: url('fonts/besley-bookitalic-webfont.woff2') format('woff2'),
         url('fonts/besley-bookitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}




@font-face {
    font-family: 'besleyextrabold';
    src: url('fonts/besley-extrabold-webfont.woff2') format('woff2'),
         url('fonts/besley-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */

}


@font-face {
    font-family: 'besleyextrabold_italic';
    src: url('fonts/besley-extrabolditalic-webfont.woff2') format('woff2'),
         url('fonts/besley-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleyfatface';
    src: url('fonts/besley-fatface-webfont.woff2') format('woff2'),
         url('fonts/besley-fatface-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleyfatface_italic';
    src: url('fonts/besley-fatfaceitalic-webfont.woff2') format('woff2'),
         url('fonts/besley-fatfaceitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleymedium';
    src: url('fonts/besley-medium-webfont.woff2') format('woff2'),
         url('fonts/besley-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleymedium_italic';
    src: url('fonts/besley-mediumitalic-webfont.woff2') format('woff2'),
         url('fonts/besley-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleysemibold';
    src: url('fonts/besley-semibold-webfont.woff2') format('woff2'),
         url('fonts/besley-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'besleysemibold_italic';
    src: url('fonts/besley-semibolditalic-webfont.woff2') format('woff2'),
         url('fonts/besley-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}

@font-face {
    font-family: 'barlowextrabold';
    src: url('fonts/barlow-extra_bold-webfont.woff2') format('woff2'),
         url('fonts/barlow-extra_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'barlowlight';
    src: url('fonts/barlow-light-webfont.woff2') format('woff2'),
         url('fonts/barlow-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}


@font-face {
    font-family: 'barlowregular';
    src: url('fonts/barlow-regular-webfont.woff2') format('woff2'),
         url('fonts/barlow-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Show text during page load even before font has loaded. */
}

/*------------------------ COLORS ---------------------------*/

.green{
    color: #649669;
}



/*------------------------ FONT STYLING ---------------------------*/

.underline{
    text-decoration: none;
    border-bottom: 1px solid #3A423E;
}

.underline:hover{
    border-bottom: none;
}

.strike{
    text-decoration: line-through;
}

.title{
    font-family: 'besleyregular', serif;
    font-weight: normal;
    font-size: 88px;
    letter-spacing: -0.01em;
    margin-top: 20px;
    color: #354f42;
    line-height: 1.17em;
}

.subtitle{
    font-family: barlowextrabold;
    text-transform: uppercase;
    font-size: 20px;
    color: #649669;
    font-weight: normal;
    letter-spacing: 0.2em;
    line-height: 1.6em;
    margin-top: 25px;
}

.text{
    font-family: 'besleyregular', serif;
    font-size: 21px;
    color: #3A423E;
    margin-top: 24px;
    font-weight: normal;
    letter-spacing: -0.004em;
    line-height: 1.7em;
}

.text-big-top-margin{
    margin-top: 30px;
}

.italic{
    font-family: 'besleyitalic', serif;
}

.link-text{
    font-family: 'besleyregular', serif;
    font-size: 21px;
    color: #3A423E;
}

.caption{
    font-family: barlowlight, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.6em;
    margin-top: 10px;
    color: #6d7571;
    letter-spacing: 0.06em;
}

.footer-link{
        font-family: 'besleyregular', serif;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: underline;
    text-transform: underline;
    letter-spacing: 0.2em;
        line-height: 2.5em;
}

.footer-link:hover{
    text-decoration: none;
}

.bullet-leaf{
    width: 30px;
    margin-right: 5px;
}

.bullet{
    margin-top: 10px;
        margin-left: 25px;
}


::selection {
    color: #354f42;
  background: #9dc3a1; /* WebKit/Blink Browsers */
}
::-moz-selection {
    color: #354f42;
  background: #9dc3a1; /* Gecko Browsers */
}

.main-hr{
   border-top: 1px solid #354f42;
    margin-top: 40px;
    display: block;
    position: relative;
}

/*-----------------------HEADER STYLING -------------------------*/

.header-div{
    width: 1000px;
    padding: 30px 0px 30px 0px;
    position: fixed;
    left: 50%;
    margin-left: -500px;
    border-bottom: 3px solid #649669;
    background-color: #F0F5F5;
    top: 0px;
    z-index: 50;
}

.logo-div{
    float: left;
    width: 300px;
}

.header-logo{
    width: 175px;
    height: auto;
}

.links-div{
    float: left;
    width: 700px;
    text-align: right;
    padding-top: 39px;
}


.main-body{
    width: 1000px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 180px;
}

.home-hero{
    width: 1000px;
    background-color: #354f42;
    transition: opacity 0.5s;
    background-color: #f0f5f5;
}

.home-hero:hover{
    opacity: 0.9;
    transition: opacity 0.5s;
}

.plant{
    background-image: url("https://localforestsglobal.com/images/plant.gif");
    width: 140px;
    height: 140px;
    background-size: 140px 140px;
    margin-top: 80px;
}

.plant:hover{
    background-image: url("https://localforestsglobal.com/images/plant-animate.gif");
    cursor: none;
}

.button{
    display: inline-block;
    margin-right: 20px;
    text-align: center;
    width: 320px;
    height: 50px;
    background-color: #354f42;
    color: #f0f5f5;
    font-family: 'barlowextrabold';
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 20px;
    margin-top: 30px;
    box-sizing: border-box;
    padding-top: 15px;
    border-radius: 4px;
    transition: color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
    line-height: 1em;
}

.button:hover{
    background-color: #649669;
    transition: color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.button:hover .green {
    color: #354f42;
    transition: color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.footer-div{
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    position: absolute; 
    border-top: 10px solid #354f42;
    margin-top: 80px;
    padding-top: 15px;
}

.tree-pattern{
    background-image: url("https://lineandgrid.ca/local-forests-global/images/tree-pattern.png");
    width: 150px;
    height: 1500px;
    background-size: 150px;
    position: fixed;
    right: 0px;
    top: 0px;
    display: none;
}

.tree-pattern-left{
    left: 0px;
    transform:scaleX(-1);
}

.active-header{
    display: none;
}

.display-phone{
        display: none;
    }

.contact-styling{
        width: 450px;
    height: 60px;
    box-sizing: border-box;
    background-color: #f0f5f5;
    border: 2px solid #649669;
    padding: 20px;
}

.contact-styling-textarea{
    height: 250px;
    width: 700px;
}

.check-me{
    padding-left: 10px;
}

    
.contact-styling-submit{
    display: block;
    text-align: center;
    width: 320px;
    height: 50px;
    background-color: #354f42;
    color: #f0f5f5;
    font-family: 'barlowextrabold';
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 20px;
    box-sizing: border-box;
    padding-top: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    transition: color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.contact-styling-submit:hover{
    background-color: #649669;
    transition: color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.margin-forty-top{
    margin-top: 40px;
}

.mobile-div{display: none;}

.video{
        width: 100%;
    margin-top: 40px;
}

.video-cover{
    position: relative;
}

.play-button{
    position: absolute;
    top: 140px;
    color: #649669;
    font-size: 200px;
    left: 430px;
    transition: color 0.3s ease-in-out;
}

.video-cover:hover .play-button{
    color: #f0f5f5;
    transition: color 0.3s ease-in-out;
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------1450 PIXEL BREAKPOINT----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 1450px) {
    
    
    .tree-pattern{
        display: none;
    }
    
    
    
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------1150 PIXEL BREAKPOINT---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 1150px) {
    
    
    
    .title{
        font-size: 65px;
    }
    
    .subtitle{
        font-size: 19px;
        margin-top: 20px;
    }
    
    .text{
        font-size: 19px;
    }
    
    .text-big-top-margin{
        margin-top: 25px;
    }
    
    .caption{
        font-size: 13px;
    }
    
    .header-div{
        width: calc(100vw - 80px);
        left: 40px;
        padding: 0px;
        margin-left: 0px;
        padding: 20px 0px;
    }
    
    body::-webkit-scrollbar {
  display: none;

}
    
    .header-logo{
        width: 140px;
    }
    
    .logo-div{
        width: 140px;
    }
    
    .links-div{
        width: calc(100vw - 220px);
        padding-top: 30px;
    }
    
    .link-text{
        font-size: 18px;
    }
    
    .main-body{
        width: calc(100vw - 80px);
        transform: none;
        left: 40px;
        margin-top: 135px;
    }
    
    .home-hero{
        width: calc(100vw - 80px);
    }
    
    .plant{
        margin-top: 65px;
        width: 120px;
    height: 120px;
    background-size: 120px 120px;
    }
    
    .button{
        margin-top: 25px;
        font-size: 19px;
    }
    
    .footer-div{
        width: calc(100vw - 80px);
        left: 40px;
        margin-left: auto;
        margin-top: 60px;
    }
    
    .contact-styling-textarea{
        width: 450px;
    }
    
    .margin-forty-top{
    margin-top: 25px;
}
    
    .display-phone{
        display: none;
    }
    
   .play-button{
    left: calc(45vw - 50px);
       font-size: 20vw;
       top: 12.5vw;
    }

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------700 PIXEL BREAKPOINT----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/



@media screen and (max-width: 700px) {
    
    .display-phone{
        display: inline;
    }
    
    .hide-phone{
        display: none;
    }
    
    .title{
        font-size: 10vw;
        margin-top: 15px;
    }
    
    .subtitle{
        font-size: 17px;
    margin-top: 10px;
    }
    
    .text{
        font-size: 17px;
    margin-top: 15px;
    }
    
    .bullet{
    margin-top: 10px;
                margin-left: 15px;
}
    
    .header-div{
        display: none;
    }
    
    .links-div{
        width: calc(100vw - 190px);
    }
    
    .main-body{
        margin-top: 120px;
    width: calc(100vw - 50px);
    left: 25px;
    }
    
    .home-hero{
        width: calc(100vw - 50px);
    }
    
    .button{
        font-size: 17px;
    height: 40px;
    width: 100%;
        margin-top: 20px;
        padding-top: 11px;

    }
    
    .plant{
        width: 100px;
    height: 100px;
    background-size: 100px 100px;
        margin-top: 60px;
    }
    
   
    
    .footer-div{
        width: calc(100vw - 50px);
    left: 25px;
        margin-top: 35px;
    }

    
    .contact-styling-textarea{
        width: 100%;
    }
    
    .contact-styling{
        width: 100%;
    }
    
    .bullet-leaf{
            margin-right: 3px;
    }
    
    .margin-forty-top{
    margin-top: 15px;
}
    
    .mobile-div{
        display: block;
        border-bottom: 3px solid #649669;
    height: 90px;
    position: fixed;
    top: 0px;
        width: 100%;
        z-index: 50;
    background-color: #f0f5f5;
    }
    
    .header-logo{
        padding-top: 20px;
    padding-left: 25px;
    }
    
    .links-div{
        width: auto;
    position: fixed;
    right: 25px;
    top: 20px;
        line-height: 1em;
    }
    
    input[type=checkbox].phonemenu {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* Toggled State */
input[type=checkbox]:checked ~ div.popout {
   display:block;
}

.popout {
    display: none;
    text-align: right;
    padding-right: 25px;
    z-index: 49;
    position: fixed;
    width: 100%;
    border-bottom: 3px solid #649669;
    height: 330px;
    background-color: #f0f5f5;
    box-sizing: border-box;
    padding-top: 50px;
    top: 90px;
    line-height: 1em;
}
    
    .video{
    margin-top: 20px;
}

    .play-button{
    left: calc(45vw - 40px);
    }
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/}