/*all pages*/

* {
    font-family: "Montserrat", sans-serif;

}

body {
    max-width: 100%;
    margin: 0;
    
}
h1 {
    font-size: 32px;
}

.col-sm-12 {
    /* changing bootstrap class so there would be no more horizontal spacing */
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}

.navbar {
    border-bottom: 1px solid #000000 !important;
}

.navbar-brand {
    font-weight: 500;
}

.navbar-nav .active a {
    color: #000000 !important;
}

.nav-item,
.nav-link {
    font-weight: 600;
    color: #000000;
}

#footer-body {
    margin-bottom: 0px;
    width: 100%;
    background-color: #000000;
    color: #ffffff;
}

#footer-body .container-fluid {
    padding-bottom: 50px;
    padding-top: 50px;
}

#footer-address a {
    text-decoration: none;
    color: #ffffff;
}

#footer-address a:hover {
    color: #d3d3d3;
}

.footer-content {
    margin-right: 10px;
    margin-left: 10px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
}

#social-media-links i {
    margin-left: 0px;
    font-size: 18px;
    padding-left: 8px;
    padding-right: 8px;
    color: #ffffff;
}

#social-media-links i:hover {
    color: #d3d3d3;
}

#lang img {
    height: 30px;
    width: auto;
    padding-right: 10px;
}

#lang p {
    font-weight: 500;
}

@media only screen and (max-width:767px) {
    .lg-devices {
        display: none;
    }
}

@media only screen and (min-width:768px) {
    .sm-devices {
        display: none;

    }

    #footer-body {
        margin-top: 50px;
    }

    .footer-content {
        text-align: left;
    }

    #footer-body .container-fluid {
        padding-bottom: 50px;
        padding-top: 50px;
    }


    p.zero-margin {
        margin-bottom: 0px;
    }

    #social-media-links {
        float: right;
        text-align: right;
    }

    #privacy-notice {
        text-align: right;
    }

}

/*home page*/

.lo-hero-image {
    width: 100%;
    margin-bottom: 100px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/big-tree.jpg);
    /*colors taken from w3schools*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 500px;

}

.lo-hero-text {
    text-align: center;
    color: #ffffff;
    width: 100%;
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;


}

.lo-hero-text h1 {
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 40px;
    margin-bottom: 30px;
}

.lo-hero-text p {
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 16px;
    font-style: italic;

}






#previews {
    position: relative;

}

#previews .row {
    margin-bottom: 100px;

}

#previews .row:last-of-type {
    margin-bottom: 40px;
}

.lo-previews-images,
.previews-text {
    padding-left: 28px;
    padding-right: 28px;
    margin-bottom: 20px;
}

.previews-text {
    text-align: center;

}

.previews-text h1 {
    font-size: 16px;
    text-decoration: none;
}

.previews-text p {
    font-weight: 800;
    font-style: oblique;
}


.lo-previews-images img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #000000;
}

.lo-article-quote li {
    margin-bottom: 20px;
    padding: 5px;
    list-style-type: none;
}

.lo-article-quote ul {
    font-size: 18px;
    width: 80%;
    text-align: center;
    font-style: italic;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width:768px) {
    .lo-hero-text h1 {
        font-size: 50px;
    }

    .lo-hero-text p {
        font-size: 18px;
    }

    .lo-article-quote ul {
        width: 60%;
    }
}

@media only screen and (min-width:992px) {
    .lo-hero-text h1 {
        font-size: 60px;
    }

    .lo-hero-text p {
        font-size: 20px;
    }

}

/* Gallery page */
#image-gallery {
    margin-top: 100px;
    margin-bottom: 100px;
    max-width: 100%;
}

#gallery-row {
    /* this ideas were from https://www.youtube.com/watch?v=180p7GLmMyQ */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#image-gallery h1 {
    font-size: 38px;
    font-style: italic;
    color: rgb(44, 61, 28);
}
#image-gallery .container-fluid{
    padding-right: 0px;
    padding-left: 0px;
}
#image-gallery .row{
    margin-left: 0px;
    margin-right: 0px;
}

.gallery-column {
    /*used !important to overide the bootstrap "column" class*/
    flex: 100% !important;
    /*because they are 10 columns */
    width: auto !important;
    overflow: hidden !important;
    padding: 0 4px !important;
    width: 100% !important;
    height: 100% !important;
}

.gallery-column img {
    width: 100%;
    height: 100%;
    margin-top: 2%;

}
.lo-cutoff .white-bg{/*crops out the last row of images to have all images end on the same line*/
    height: 200px;
    background-color: #ffffff;
    width: 100%;
    margin-top: -300px;
    margin-bottom: -100px; /*needed to push the footer upwards*/
    background: linear-gradient(#ffffff 50%, #000000 50%);
    z-index: 2; /*z-index was used to give greater stack order to the div*/
    position: relative;
    display: none; /*not need for mobile devices*/
}

@media only screen and (min-width:680px) {
    #image-gallery {
        margin-left: 5%;
        margin-right: 5%;
        max-width: 100%;
    }

    .gallery-column {
        flex: 50% !important;
    }
    .lo-cutoff .white-bg{
        display: block;
    }
}

@media only screen and (min-width:800px) {
    #image-gallery {
        margin-left: 5%;
        margin-right: 5%;
    }

    .gallery-column {
        flex: 33.3% !important;
    }
}

/*about-us page*/
.lo-about-us {
    margin-top: 100px;
}

.about-us video {
    margin-bottom: 20px;
    width: 100%;
    height: auto;
}

.about-us-header {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.about-us-header a {
    text-decoration: none;
    color: #000000;
}

.lo-about-icons i {
    margin-right: 10px;

}

.about-us-content p {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

.about-us iframe {
    width: 100%;
    height: 550px;

}

.about-us-content a {
    text-decoration: none;
}

.about-us-content {
    font-size: 20px;
    padding: 5px;
}



.about-us-content i:hover {
    color: #3b3c4191;
}

.about-us-content h1 {
    font-weight: 800;
    letter-spacing: 1.2px;
}

.about-us-content p {
    font-size: 18px;
    padding: 2px;
}

.lo-acc-link {
    text-decoration: none;
    color: #000000;
    font-weight: 700;
}

.lo-acc-link:hover {
    color: rgb(17, 117, 17);
}

.lo-faq{
    margin-top: 20px;
    margin-bottom: 30px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;


}
.lo-faq h2{
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
}
.lo-faq #accordion{
    box-sizing: border-box;
    overflow-x: hidden;
    max-width: 99%;
}
.card{
    border: none !important;
}
.card button{
    color: #000000;
    font-weight: 600;
    padding: 0 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
}
.lo-faq .btn-link:hover{
    color: #2ca707ab;
}
.lo-faq .btn-link:hover, .lo-faq .btn-link, .lo-faq .btn-link:focus, .lo-faq .btn, .lo-faq .btn:focus{
    text-decoration: none;
}
.card-header{
    padding: 20px;
}
.card-header h5{
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
@media only screen and (min-width:992px) {
    .about-us-content p{
        text-align: justify;
    }
}

/* projects page */
.projects-intro{
    margin-top: 100px;
    margin-bottom: 30px;
}
#lo-video {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    

}
.projects-body-header {
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.projects-body-thumbnail {
    display: block;
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
}

.projects-body-calendar a {
    text-decoration: none;
    padding: 5px;
    text-align: center;
    font-size: 20px;
}

.projects-body-calendar a i {
    padding-bottom: 15px;
}

.projects-body-paragraph {
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    font-weight: 500;
    width: 80%;
}

.projects-body-modal {
    display: block;
    width: 50%;
    text-align: center;
    padding: 10px;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgb(235, 221, 32);
    cursor: pointer;
}

.projects-body-call {
    display: block;
    text-align: center;
    text-decoration: none;
}
.gmap_canvas {
    overflow: hidden;
    background: none !important;
    height: auto;
    width: 100%;
}

#gmap_canvas {
    width: 100%;
    height: 200px;
}
@media only screen and (min-width:768px) {
    .projects-body-thumbnail {
        width: 80%;
    }

    .projects-body-modal {
        width: 30%
    }
}

@media only screen and (min-width:992px) {

    .projects-body-modal {
        width: 20%
    }
}
@media only screen and (min-width:768px) {
    #gmap_canvas {
        height: 400px;
    }
    #lo-video{
        width: 80%;
    }
} 

/*sign-up and sign-in pages*/

#bg-body {
    background-image: url("../images/sipg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

#lo-signup-body {
    background-image: url(../images/leopard-sign-up.jpg);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.lo-form-sign-in {
    margin-top: 200px;
    margin-bottom: 200px;
}

.lo-form-sign-up {
    margin-top: 100px;
    margin-bottom: 100px;
}

.lo-form-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

.lo-form-input label {
    display: none;
}

.lo-form-input input {
    color: #000000;
    font-weight: 600;
}

.lo-form-input p {
    color: #d3d3d3;
}

#sign-up,
#sign-in {
    text-decoration: none;
    font-weight: 600;
}

.form-container {
    border: 1px solid;
    padding: 50px 60px;
}

.form-group {
    padding: 16px;
}

@media only screen and (min-width:768px) {
    .lo-form-sign-up {
        margin-top: 200px;
        margin-bottom: 200px;
    }
}