/*************************************************************
*                           Layout                           *
**************************************************************/
.main-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: calc( 100vh - 109px );
    //background: linear-gradient( rgba(255, 255, 255, 0.4 ), rgba(255, 255, 255, 0.8) ), url(../assets/images/fabric.jpg) top center;
    background-color: rgba(192, 192, 192, 0.12);
    background-color: #e9e9e9;
    background-color: #FFF;
    background-color: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
}

.content {
    flex: 0 0 100%;
    width: 100%;
}

@media only screen and (min-width: 600px) {
    .left-container {
        flex: 0 1 50%;
        height: 100%;
        border-right: 1px solid grey;
    }
}

@media only screen and (max-width: 600px) {
    .left-container {
        flex: 0 1 100%;
        height: 100%;
        overflow: hidden;
        border-right: 5px solid red;
    }
}

.left-container-home {
    /*width: 38%;*/
    flex: 0 1 38%;
}

.left-container-home img {
    width: 100%;
    height: auto
    filter: grayscale(100%);
}

.right-container-home {
    flex: 0 1 62%;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
}

@media only screen and (max-width: 768px) {
    .left-container-team {
        flex: 0 1 100%;
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 768px) {
    .right-container-team {
        flex: 0 1 100%;
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 769px) {
    .left-container-team {
        flex: 0 1 62%;
        height: 100%;
        border-right: 1px solid grey;
    }
}

@media only screen and (min-width: 769px) {
    .right-container-team {
        flex: 0 1 38%;
        /*display : flex;*/
        height: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

.left-content-container-about-25 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 25%;
    max-height: 25%;
}

@media only screen and (max-width: 375px) {
    .left-container-contact {
        flex: 0 1 100%;
        height: 100%;
        /*height: 50%;*/
        border-right: 1px solid grey;
    }

    .left-container-contact iframe {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (min-width: 668px) {
    .left-container-contact {
        flex: 0 1 50%;
        max-height: 100%;
        border-right: 1px solid grey;
    }

    .left-container-contact iframe {
        width: 100%;
        height: 60%;
    }
}

@media only screen and (min-width: 376px) and (max-width: 669px) {
    .left-container-contact {
        flex: 0 1 50%;
        height: 100%;
        border-right: 1px solid grey;
    }

    .left-container-contact iframe {
        width: 100%;
        height: 100%;
    }
}

/*@media only screen and (min-width: 376px) {*/
    /*.left-container-contact {*/
        /*flex: 0 1 50%;*/
        /*max-height: 100%;*/
        /*border-right: 1px solid grey;*/
    /*}*/

    /*.left-container-contact iframe {*/
        /*width: 100%;*/
        /*height: 60%;*/
    /*}*/
/*}*/



.left-container-contact img {
    width:50%;
    height:100%;
    filter: grayscale(100%);
}

.left-container iframe {
    border: 0;
    margin: 0;
    /*filter: grayscale(100%);*/
    /*opacity: 0.5;*/

    filter: grayscale(1%);
    opacity: 0.9;
}

.left-container iframe:hover {
    /*filter: grayscale(1%);*/
    /*opacity: 0.9;*/
}

.left-content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50%;
    max-height: 50%;
}

@media only screen and (min-width: 668px) {
    .right-container {
        flex: 0 1 50%;
        height: 100%;
        width: 50%;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 667px) {
    .right-container {
        flex: 0 1 50%;
        height: calc(50% + 109px);
        /*overflow: hidden;*/
        align-items: flex-start;
    }
}

@media only screen and (max-width: 375px) {
    .right-container {
        flex: 0 1 100%;
        height: calc(50% + 109px);
        /*overflow: hidden;*/
        align-items: flex-start;
    }
}

@media (min-width: 601px) and (max-width: 767px)  {
    .hidden-small {
        display: none !important;
    }
}

@media (max-width: 677px)  {
    .hidden-xxs {
        display: none !important;
    }
}

@media (max-width: 375px)  {
    .hidden-tiny {
        display: none !important;
    }
}

.contact-container {
   height: 60%;
   padding-top: 7vh;
}

.story-container {
    height: 40%;
}