@font-face {
    font-family:Montserrat-normal;
    src: url(../assets/Montserrat-normal.ttf);
}
body {
    background-color: black;
    margin: 0;
}

.bh__project {
    width: 100%;
    height: 100%;
    background-image: url("../assets/bg-proyecto.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
    z-index: -9;
}

.project__info__container {
    width: 56vw;
    flex-direction: row;
    display: flex;
    position: absolute;
    top: 14vw;
    left:9vw;
    align-items: center;
    
}

.img-container {
    width: 37.3vw;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    height: 24vw;
    
}


.img {
    width: 11.2vw;
    height: 11.2vw;
    justify-content: center;
    align-items: center;
    display: flex;
}

.image {
    width: 100%;
    height: 100%;
    position: relative;
}

.img__text {
    position: absolute;
    font-family: Montserrat-normal;
    color: #ffffff;
    font-size: 0.9vw;
    text-align: center;
}

.img__row {
    display: flex;
    justify-content: space-between;
}

.project__container {
    width: 6vw;
    position: relative;
    right: 0;
    top: 0vw;
    margin: 0 0 0 4rem;
}

.project__title {
    width: 30vw;
    margin: 0 0 2rem 0;
}

.project__text {
    font-size: 1.3vw;
    font-family: Montserrat-normal;
    color: #ffffff;
    width: 33vw;
    margin: 0 31rem 0 0;
    padding: 0 0 0 4rem;
}

.what__img {
    position: relative;
    top: 6vw;
    left: -18vw;
    width: 38vw;
}


@media screen and (max-width: 871px) {
    .project__info__container {
        width: 56vw;
        flex-direction: column-reverse;
        display: flex;
        position: absolute;
        top: 10rem;
        left:0px;
        align-items: center;
        z-index: -9;
        
    }
    
    .img-container {
        width:70.3vw;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        height: 47vw;
        padding-left: 300px;
        z-index: -9;
    }
    
    
    .img {
        width: 22.2vw;
        height: 22.2vw;
        justify-content: center;
        align-items: center;
        display: flex;
        z-index: -9;
    }
    
    
    
    .img__text {
        position: absolute;
        font-family: Montserrat-normal;
        color: #ffffff;
        font-size: 1.9vw;
        text-align: center;
        z-index: -9;
    }
    
    
    .project__container {
        width: 6vw;
        position: relative;
        right: 0;
        top: 0rem;
        margin: 0 0 0 0rem;
        
    }
    
    .project__title {
        width: 50vw;
        margin: 0 0 2rem 0;
       
    }
    
    .project__text {
        font-size: 2.3vw;
        font-family: Montserrat-normal;
        color: #ffffff;
        width: 65vw;
        margin: 0 0rem 0 0;
        padding: 0 0 0 0rem;
        text-align: center;
        padding-bottom: 3rem;
    }
    
    .what__img {
       display: none;
    }
    
    
}

@media screen and (max-device-width: 870px) {
    .project__info__container {
        width: 56vw;
        flex-direction: column-reverse;
        display: flex;
        position: absolute;
        top: 12rem;
        left:0px;
        align-items: center;
        
    }
    
    .img-container {
        width:70.3vw;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        height: 47vw;
        padding-left: 450px;
    }
    
    
    .img {
        width: 22.2vw;
        height: 22.2vw;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    
    
    
    .img__text {
        position: absolute;
        font-family: Montserrat-normal;
        color: #ffffff;
        font-size: 1.9vw;
        text-align: center;
    }
    
    
    .project__container {
        width: 6vw;
        position: relative;
        right: 0;
        top: 0rem;
        margin: 0 0 0 0rem;
    }
    
    .project__title {
        width: 50vw;
        margin: 0 0 2rem 0;
       
    }
    
    .project__text {
        font-size: 2.5vw;
        font-family: Montserrat-normal;
        color: #ffffff;
        width: 65vw;
        margin: 0 0rem 0 0;
        padding: 0 0 0 0rem;
        text-align: center;
        padding-bottom: 4rem;
    }
    
    .what__img {
       display: none;
    }
    
    
}



@media only screen and (max-device-width: 640px) {
    .project__info__container {
        width: 56vw;
        flex-direction: column-reverse;
        display: flex;
        position: absolute;
        top: 18rem;
        left:0px;
        align-items: center;
        
    }
    
    .img-container {
        width:89.3vw;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        height: 53vw;
        padding-left: 450px;
        z-index: -9;
    }
    
    
    .img {
        width: 25.2vw;
        height: 25.2vw;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    
    
    
    .img__text {
        position: absolute;
        font-family: Montserrat-normal;
        color: #ffffff;
        font-size: 2.1vw;
        text-align: center;
    }
    
    
    .project__container {
        width: 6vw;
        position: relative;
        right: 0;
        top: 0rem;
        margin: 0 0 0 0rem;
    }
    
    .project__title {
        width: 60vw;
        margin: 0 0 2rem 0;
       
    }
    
    .project__text {
        font-size: 3.5vw;
        font-family: Montserrat-normal;
        color: #ffffff;
        width: 59vw;
        margin: 0 0rem 0 0;
        padding: 0 0 0 0rem;
        text-align: center;
        padding-bottom: 4rem;
    }
    
    .what__img {
       display: none;
    }
    
}