html {
    font-family: 'Source Sans Pro', sans-serif;
}

.jumbotron {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    height: 500px;
    padding: 150px 10% 75px 62%;
    background: url("../img/smart-place/jumbotron.png") center center no-repeat;
    background-size: 100% 100%;
    color: #2e2d7d;
    font-size: 16px;
}

    .jumbotron > .title {
        font-size: 26px;
        font-weight: bold;
    }

    .jumbotron > .content {
        line-height: 30px;
        margin-bottom: auto;
    }

    .jumbotron .cta-container {
        width: 390px;
        display: flex;
        justify-content: space-between;
    }

        .jumbotron .cta {
            display: block;
            height: 60px;
        }
        
        .jumbotron .cta-play {
            width: 170px;
            background: url("../img/google-play.png") center center no-repeat;
            background-size: 100% 100%;
        }
        
        .jumbotron .cta-store {
            width: 200px;
            background: url("../img/app-store.png") center center no-repeat;
            background-size: 100% 100%;
        }

.description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 80%;
    padding: 20px 10%;
    color: #2e2d7d;
    background: rgb(238, 238, 238);
    font-size: 14px;
}

    .description > .title {
        font-size: 20px;
        font-weight: bold;
    }

    .description > .content {
        line-height: 25px;
    }

.partnerships {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    padding: 50px 0px;
    background: url("../img/parceiros.jpg") center center no-repeat;
    background-size: 100% 100%;
    color: #eeeeee;
    font-size: 14px;
}

    .partnerships > .title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    .partnerships > .content {
        text-align: center;
    }

    .partnerships > .partner-list {
        display: flex;
        justify-content: space-between;
        width: 40%;
        height: 75px;
        padding: 0px 30%;
        margin-top: auto;
    }

        .partner-list > .partner-item {
            width: 27%;
            height: 100%;
        }

        .partner-list > .partner-ufrn {
            background: url("../img/logo-ufrn-white.png") center center no-repeat;
            background-size: 100% 65%;
        }

        .partner-list > .partner-imd {
            background: url("../img/logo-imd-white.png") center center no-repeat;
            background-size: 100% 40%;
        }

        .partner-list > .partner-smart {
            background: url("../img/logo-smart-metropolis-white.png") center center no-repeat;
            background-size: 100% 100%;
        }

.features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 80%;
    height: 380px;
    padding: 35px 10%;
    background: rgb(238, 238, 238);
    color: #2e2d7d;
}

    .features > .title {
        font-size: 20px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 40px;
    }

    .features > .feature-list {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 350px;
    }

        .feature-list > .feature-item {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            width: 30%;
            max-width: 350px;
            height: 100%;
            text-align: center;
            font-size: 14px;
        }

            .feature-item > .feature-image {
                width: 100%;
                height: 40%;
            }

            .feature-item > .conexao-segura {
                background: url('../img/conexao-segura.png') center center no-repeat;
                background-size: 83px 100px;
            } 

            .feature-item > .anti-trote {
                background: url('../img/anti-trote.png') center center no-repeat;
                background-size: 83px 100px;
            } 
            
            .feature-item > .analise-dados {
                background: url('../img/smart-place/integrated.png') center center no-repeat;
                background-size: 83px 100px;
            }

            .feature-item > .facil-usabilidade {
                background: url('../img/facil-usabilidade.png') center center no-repeat;
                background-size: 70px 100px;
            } 

            .feature-item > .title {
                font-size: 16px;
                font-weight: bold;
                text-transform: uppercase;
            }

            .feature-item > .content {
                margin: 0px;
            }


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

    .jumbotron {
        background: none;
        padding: 50px 10% 20px 10%;
    }

    .partnerships {
        background-size: 260% 100%;
    }

        .partnerships > .partner-list {
            width: 80%;
            padding: 0px 10%;
            overflow: visible;
        }

            .partner-list > .partner-ufrn {
                background-size: 100% 100%;
            }

            .partner-list > .partner-imd {
                background-size: 100% 60%;
            }

            .partner-list > .partner-smart {
                background-size: 100% 160%;
            }

    .features {
        height: auto;
    }

        .features > .feature-list {
            height: auto;
            flex-wrap: wrap;
        }

            .feature-list > .feature-item {
                width: 100%;
                margin-bottom: 40px;
            }

                .feature-item > .feature-image {
                    height: 100px;
                }

}