.gallery {
    width: 100%;
    background: #eeeeee;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
}

.gallery_title {
    text-transform: uppercase;
    margin: auto;
    text-align: center;
    margin-top: 5%;
    font-size: 70px;
    width: 100%;
}

.gallery_title span {
    font-weight: 900;
}

.gallery_description {
    width: 32%;
    margin: auto;
    margin-top: 1%;
    font-size: 15px;
    color: gray;
    text-align: justify;
    text-justify: inter-word;
    font-weight: 700;
}

.gallery_images {
    margin: auto;
    margin-top: 2%;
    width: 80%;
}

.gallery_images img {
    width: 100%;
}

.right_img {
    transform: rotate(201deg);
    margin-top: 41px;
    /* width: 100%; */
}

.left_img {
    transform: rotate(201deg);
    margin-top: 61px;
    /* width: 100%; */
}

.project_description {
    position: absolute;
    top: 43%;
    bottom: 0;
    left: 21%;
    right: 0;
    color: black;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    width: 65%;
}

.right_project_description {
    position: absolute;
    top: 43%;
    bottom: 0;
    left: 21%;
    right: 0;
    color: black;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    width: 65%;
}

.col-md-6:hover .project_description,
.right_project_description {
    visibility: visible;
    opacity: 1;
}

.project_description {
    text-align: center;
}

.project_description span {
    font-weight: 900;
    color: black;
}

.project_description h1 {
    text-transform: uppercase;
    font-size: 49px;
}

.project_description p {
    font-weight: 700;
    color: gray;
    text-align: center;
    width: 99%;
}

.right_project_description {
    text-align: center;
}

.right_project_description span {
    font-weight: 900;
    color: black;
}

.right_project_description h1 {
    text-transform: uppercase;
    font-size: 49px;
}

.right_project_description p {
    font-weight: 700;
    color: gray;
    text-align: center;
    width: 99%;
}

.more_projects {
    margin: auto;
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
}

.arrowMoreProjects{
    text-align: center;
    font-size: 2em;
}

.footer {
    padding-top: 2%;
    background-color: #eeeeee;
    width: 100%;
}

.allignRow {
    display: inline-flex;
}

.allignLeaf {
    margin: auto;
}
/*no outline on firefox for leafs*/
:-moz-focusring {
    outline: none;
}
/*end no outline on firefox for leafs*/

body {
    background-color: #eee;
}

.footer {
    background-color: #eee !important;
}

.leafPortofolioLeft {
    background-image: url("../img/leaf_portofolioLeft.png");
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    background-size: 100%;
    width: 425px;
    height: 425px;
    overflow: hidden;
    display: inline-flex;
}

.leafPortofolioRight {
    background-image: url("../img/leaf_portofolioRight.png");
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    background-size: 100%;
    width: 425px;
    height: 425px;
    overflow: hidden;
    display: inline-flex;
}

.insideLeafPortofolio {
    margin: auto;
}

.firstLeafMobileAllign {
    margin-top: 20px;
    margin-bottom: -20px;
}

.allignLeaf:hover {
    filter: drop-shadow(10px 7px 10px grey);
}

@media screen and (max-width: 319px) {
    body {
        display: none;
    }
}

@media screen and (min-width: 319px) {
    .project_description {
        position: absolute;
        top: 28%;
        bottom: 0px;
        left: 24%;
        right: 0;
        color: black;
        visibility: visible;
        opacity: 1;
        transition: opacity .2s, visibility .2s;
        width: 65%;
    }

    .project_description p {
        font-weight: 700;
        color: gray;
        text-align: center;
        font-size: 15px;
    }

    .project_description h1 {
        font-size: 20px;
    }

    .right_project_description p {
        font-size: 15px;
    }

    .right_project_description {
        text-align: center;
        top: 18%;
        left: 10%;
    }

    .right_project_description h1 {
        font-size: 20px;
    }

    .gallery_title {
        font-size: 33px;
    }

    .gallery_description {
        font-size: 10px;
        width: 63%;
        margin-top: 2%;
        font-size: 15px;
        text-justify: inter-word;
    }

    .more_projects {
        font-size: 14px;
        padding: 5%;
    }

    .right_img {
        margin-top: 6px;
    }

    .right_img {
        transform: rotate(184deg);
    }

    .leafPortofolioLeft, .leafPortofolioRight {
        width: 200px;
        height: 200px;
    }

    .gallery_images img {
        width: 98%;
    }
}

@media only screen and (min-width: 425px) {
    .leafPortofolioLeft, .leafPortofolioRight {
        width: 300px;
        height: 300px;
    }
}

@media only screen and (max-width: 767px) {
    .gallery_title {
        margin-top: 12%;
    }
}

@media screen and (min-width: 768px) {
    .col-md-12 {
        width: 50%;
    }

    .project_description {
        top: 34%;
        visibility: visible;
        opacity: 1;
    }

    .project_description p {
        font-size: 15px;
    }

    .project_description h1 {
        font-size: 25px;
    }

    .right_project_description {
        top: 31%;
        left: 12%;
    }

    .right_project_description p {
        font-size: 15px;
    }

    .right_project_description h1 {
        font-size: 25px;
    }

    .gallery_title {
        font-size: 50px;
    }

    .gallery_description {
        font-size: 15px;
    }

    .more_projects {
        font-size: 20px;
        padding-bottom: 10px;
    }

    .right_img {
        margin-top: 16px;
    }

    .leafPortofolioLeft, .leafPortofolioRight {
        width: 250px;
        height: 250px;
    }

    .gallery_images img {
        width: 98%;
    }

}

@media screen and (min-width: 1024px) {
    .gallery_title {
        font-size: 50px;
    }

    .project_description {
        top: 30%;
        left: 25%;
        visibility: visible;
        opacity: 1;
    }

    .project_description p {
        font-size: 12px;
    }

    .project_description h1 {
        font-size: 30px;
    }

    .right_project_description {
        top: 28%;
        left: 9%;
    }

    .right_project_description p {
        font-size: 12px;
    }

    .right_project_description h1 {
        font-size: 30px;
    }

    .right_img {
        transform: rotate(201deg);
        margin-top: 24px;
    }
}

@media screen and (min-width: 1200px) {
    .gallery_images img {
        width: 98%;
    }

    .right_img {
        transform: rotate(200deg);
        margin-top: 23px;
        margin-left: 23%;
    }

    .project_description {
        top: 41%;
        left: 10%;
        visibility: visible;
        opacity: 1;
    }

    .right_project_description {
        top: 39%;
        left: 30%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .leafPortofolioLeft, .leafPortofolioRight {
        width: 425px;
        height: 425px;
    }
    .gallery_description{
        width: 53%;
    }

}

@media screen and (min-width: 1440px) {
    .project_description {
        top: 40%;
        left: 77px;
        visibility: hidden;
        opacity: 0;
    }

    .right_project_description {
        top: 37%;
        left: 15%;
        visibility: hidden;
        opacity: 1;
    }

    .col-md-12:hover .project_description {
        visibility: visible;
        opacity: 1;
        background-attachment: red;
    }

    .col-md-12:hover .right_project_description {
        visibility: visible;
        opacity: 1;
    }

    .project_description {
        left: 8px;
        top: 44%;
    }

    .project_description p {
        font-size: 13px;
        width: 60%;
        margin-left: 19%;
    }

    .project_description h1 {
        font-size: 42px;
    }

    .right_project_description p {
        font-size: 13px;
        width: 60%;
        margin-left: 18%;
    }

    .right_project_description h1 {
        font-size: 34px;
    }

    .right_img {
        margin-top: 32px;
        margin-left: 20%;
    }
    .gallery_description{
        width: 45%;
    }
}

@media screen and (min-width: 1440px) {
    .gallery_images img {
        width: 98%;
        padding-bottom: 1px;
    }

    .project_description h1 {
        font-size: 31px;
    }
}

@media screen and (min-width: 2560px) {
    .gallery_title {
        font-size: 100px;
    }

    .gallery_description {
        font-size: 26px;
        width: 50%;
    }

    .project_description {
        top: 40%;
        left: 77px;
        visibility: hidden;
        opacity: 0;
    }

    .right_project_description {
        top: 31%;
        left: 13%;
        visibility: hidden;
        opacity: 0;
    }

    .col-md-6:hover .project_description {
        visibility: visible;
        opacity: 1;
    }

    .col-md-6:hover .right_project_description {
        visibility: visible;
        opacity: 1;
    }

    .project_description {
        left: 18%;
        top: 38%;
    }

    .project_description p {
        font-size: 18px;
        width: 67%;
        margin-left: 15%;
    }

    .project_description h1 {
        font-size: 36px;
    }

    .right_project_description p {
        font-size: 18px;
        width: 67%;
        margin-left: 17%;
    }

    .right_project_description h1 {
        font-size: 36px;
    }

    .right_img {
        transform: rotate(201deg);
        margin-top: 31px;
    }

    .right_project_description {
        top: 36%;
        left: 13%;
        visibility: hidden;
        opacity: 0;
    }

    .project_description {
    }

    .more_projects {
        font-size: 70px;
        padding: 5%;
    }

    .gallery_images img {
        width: 98%;
        margin: auto;
    }

    .leafPortofolioLeft, .leafPortofolioRight {
        width: 600px;
        height: 600px;
    }

}


/*edge check*/
@supports (-ms-ime-align:auto) {
    .gallery_images img{
        height: 87%;
    }
}
/*edge check*/