#developer-hero{
    width: 100%;
    background: url("../images/wallbg.jpg");
    background-size: cover;
    background-position: right bottom;
    text-align: left;
    display: flex;
    transition: .5s;
    padding-top: 125px;
}

#dev-fecr-logo-container {
    text-align: center;
    transition: .5s;
}

#dev-fecr-logo {
    margin-top: 20px;
    width: 100%;
    transition: .5s;
}

#dev-grid-container-columns {
    display: grid;
    transition: .5s;
    padding-bottom: 5%;
}

#dev-grid-container-columns img {
    width: 100%;
}

#dev-item-1 {
    grid-area: dev-item-1;
    text-align: center;
    transition: .5s;
    margin: 0;
    font-size: 1.2em;
    line-height: 1.8em;
}

#dev-item-2 {
    grid-area: dev-item-2;
    text-align: center;
    transition: .5s;
    margin: 0;
    font-size: 1.2em;
    line-height: 1.8em;
}

.property-name{
    text-transform: uppercase;
    font-size: 1.1em;
}

.dev-item-text {
    text-align: left;
    transition: .5s;
}



@media only screen and (max-width: 360px) {

    #dev-fecr-logo {
        padding: 0%;
    }

    #dev-founded-by-text {
        padding: 0 5%;
    }

    #dev-grid-container-columns {
        grid-template-areas: "dev-item-1"
                             "dev-item-2";

    }

    .dev-item-text {
        padding: 0 5%;
    }


}

@media only screen and (min-width: 360px) and (max-width: 760px) {

    #dev-fecr-logo {
        padding: 0%;

    }

    #dev-founded-by-text {
        padding: 0 10%;
    }

    #dev-grid-container-columns {
        grid-template-areas: "dev-item-1"
                             "dev-item-2";
        transition: .5s;
    }

    .dev-item-text {
        padding: 0 10%;
    }
}

@media only screen and (min-width: 760px) and (max-width: 1280px) {

    #dev-fecr-logo {
        width: 500px;
    }

    #dev-founded-by-text {
        padding: 0 7%;
    }

    #dev-grid-container-columns {
        grid-template-areas: "dev-item-1 dev-item-2";
        transition: .5s;
        padding: 6% 5%;
    }

    #dev-item-1 {
        margin-right: 50px;
    }

    #dev-item-2 {
        margin-left: 50px;
    }

    .dev-item-text {
        padding: 0 5%;
    }

}

@media only screen and (min-width: 1280px) and (max-width: 1460px) {

    #dev-fecr-logo {
        width: 500px;
    }

    #dev-founded-by-text {
        padding: 0 12%;
    }

    #dev-grid-container-columns {
        grid-template-areas: "dev-item-1 dev-item-2";
        transition: .5s;
        padding: 6% 10%;
    }

    #dev-item-1 {
        margin-right: 50px;
    }

    #dev-item-2 {
        margin-left: 50px;
    }

    .dev-item-text {
        padding: 0 5%;
    }
}

@media only screen and (min-width: 1460px) and (max-width: 1760px) {

    #dev-fecr-logo {
        width: 500px;
    }

    #dev-founded-by-text {
        padding: 0 16.5%;
    }

    #dev-grid-container-columns {
        grid-template-areas: "dev-item-1 dev-item-2";
        transition: .5s;
        padding: 6% 15%;
    }

    #dev-item-1 {
        margin-right: 50px;
    }

    #dev-item-2 {
        margin-left: 50px;
    }

    .dev-item-text {
        padding: 0 5%;
    }
}

@media only screen and (min-width: 1760px) and (max-width: 2020px) {

    #dev-fecr-logo {
        width: 500px;
    }

    #dev-founded-by-text {
        padding: 0 20%;
    }

    #dev-grid-container-columns {
        grid-template-areas: "dev-item-1 dev-item-2";
        transition: .5s;
        padding: 6% 20%;
    }

    #dev-item-1 {
        margin-right: 50px;
    }

    #dev-item-2 {
        margin-left: 50px;
    }
}

@media only screen and (min-width: 2020px) and (max-width:2400px ) {

    #dev-fecr-logo {
        width: 500px;
    }

    #dev-founded-by-text {
        padding: 0 15%;
    }

    #dev-grid-container-columns {
        grid-template-areas: "dev-item-1 dev-item-2";
        transition: .5s;
        padding: 6% 15%;
    }

    #dev-item-1 {
        margin-right: 50px;
    }

    #dev-item-2 {
        margin-left: 50px;
    }

}

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

    #dev-fecr-logo {
        width: 500px;
    }

    #dev-founded-by-text {
        padding: 0 25%;
    }

    #dev-grid-container-columns {
        grid-template-areas: "dev-item-1 dev-item-2";
        transition: .5s;
        padding: 6% 25%;
    }

    #dev-item-1 {
        margin-right: 50px;
    }

    #dev-item-2 {
        margin-left: 50px;
    }
}

/* body  */


html, body{
    height: 100%;
}
#developer-hero{
    /* min-height: calc(~"100% - 95px"); */
    width: 100%;
    background: url("../images/wallbg.webp");
    background-size: cover;
    background-position: right bottom;
    text-align: left;
    display: flex;
    transition: .5s;
    /* padding-top: 125px; */
}
#hollos{
    background: url("../images/Hollos4-2.webp");
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;

    /* object-fit: contain;
    object-position: right bottom; */

    flex: 3;
    transition: .5s;
}
#developer-paragraph{
    max-width: 600px;
    color: white;
    padding: 5%;
    background-color: #6F9AA7;
    background-image: linear-gradient(#6F9AA7, #354a64, #354a64);
    flex: 1;
    margin: 0 5% 0 0;
}

#developer-paragraph h1{
    margin: 0;
}

#developer-paragraph p{
    font-size: 1.2em;
    line-height: 1.5em;
}

.fecr-logo{
    width: 100%;
    /* padding: 0 5%; */
    padding-top: 50px;
}




@media screen and (min-width: 2300px){
      #developer-hero{
        width:100%;
        /* background: url("images/4 Hollo's 2020 Silo'd (extra bg wide4).jpg");
        background-size: cover;
        background-position: right bottom;
        padding-left: 28%; */
        /* padding: 0 10%; */
        padding-top: 125px;
      }

      #developer-paragraph{
          margin: 0 10% 0 0;
      }
}

@media screen and (min-width: 1600px) and (max-width: 2300px){
    #developer-paragraph{
        margin: 0 3% 0 0;
    }

        #developer-paragraph p{
            font-size: 1em;
        }
        #developer-paragraph h1{
            font-size: 1.5em;
        }
}

@media screen and (max-width: 1600px){
    #developer-paragraph p{
        font-size: 1em;
    }
    #developer-paragraph h1{
        font-size: 1.5em;
    }

}


@media screen and (max-width: 1350px){
    .fecr-logo{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #developer-paragraph{
        /* padding: 4%; */
        padding: 10% 4% 0 4%;
    }
    #developer-paragraph h1{
        font-size: 1.3em;
    }
    #developer-paragraph p{
        font-size: .85em;
    }
}

@media screen and (max-width: 1150px){

    .fecr-logo{
        padding-top: 50px;
        padding-bottom: 0;
    }
    #developer-paragraph{
        /* padding: 4%; */
        padding: 8% 3% 3% 3%;
    }
}


@media screen and (max-width: 1000px){

    #developer-paragraph h1{
        font-size: 1.1em;
    }
    #developer-paragraph p{
        font-size: .75em;
    }
}

@media screen and (max-width: 900px){
    #developer-hero{
        flex-direction: column;
    }
    #hollos{
        width:100%;
        min-height: 50vh;
        flex: 1;
    }
    #developer-paragraph{
        margin: 0;
        max-width: 100%;
        padding: 10% 10% 0 10%;
        background-color: white;
        background-image: none;
        color: black;
    }
    #developer-paragraph h1{
        font-size: 2em;
        text-align: center;
    }
    #developer-paragraph p{
        font-size: 1em;
    }

    .fecr-logo{
        /* padding-left: 10%;
        padding-right: 10%; */
        content:url("../images/FECR LOGO horizontal.png")
    }
    .fecr-logo::before{

        content:url("../images/FECR LOGO horizontal.png")
    }

}

@media screen and (max-width: 700px){
    #hollos{
        min-height: 35vh;
    }
}


/* @media screen and (max-width: 540px){
    #hollos{
        min-height: 30vh;
    }
} */

@media only screen and (max-width: 759px ){

.head-spacer{
height: 0px;
}

#developer-hero{
  padding-top:0;
}

}