.ThemeArea {
    text-align: center;
    position: relative;
}

    .ThemeArea div {
        margin: 2% 0%;
    }

        .ThemeArea div div img {
            width: 85%;
        }

        .ThemeArea div div span:nth-child(2) {
            position: absolute;
            z-index: 2;
            width: 80%;
            top: 21%;
            left: 16%;
            text-align: left;
            font-size: 2em;
            font-weight: bold;
            color: #FFFFFF;
        }

        .ThemeArea div div span:nth-child(3) {
            position: absolute;
            z-index: 2;
            width: 80%;
            top: 30%;
            left: 16%;
            text-align: left;
            font-size: 1.2em;
            color: #FFFFFF;
        }

        .ThemeArea div div p {
            position: absolute;
            z-index: 2;
            width: 65%;
            top: 43%;
            left: 16%;
            text-align: left;
            font-size: 1em;
            color: #FFFFFF;
        }

@media (max-width: 1200px) {
    .ThemeArea div div span:nth-child(2) {
        top: 18%;
        font-size: 1.8em;
    }

    .ThemeArea div div span:nth-child(3) {
        top: 29%;
        font-size: 1em;
    }

    .ThemeArea div div p {
        top: 43%;
        font-size: 0.95em;
    }
}

@media (max-width: 991px) {
    .ThemeArea div div span:nth-child(2) {
        top: 25%;
        font-size: 2em;
    }

    .ThemeArea div div span:nth-child(3) {
        top: 32%;
        font-size: 1.2em;
    }

    .ThemeArea div div p {
        top: 45%;
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .ThemeArea div div img {
        width: 90%;
    }

    .ThemeArea div div span:nth-child(2) {
        width: 80%;
        top: 12%;
        left: 16%;
        font-size: 1.7em;
    }

    .ThemeArea div div span:nth-child(3) {
        width: 80%;
        top: 25%;
        left: 16%;
        font-size: 1em;
    }

    .ThemeArea div div p {
        top: 34%;
        left: 16%;
        font-size: 0.9em;
        width:65%;
    }
}


.IntegrationArea {
    text-align: center;
    position: relative;
}
    .IntegrationArea .row {     
        background-image: url(/Content/images/selfDriving/integration/backup.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .IntegrationArea div div {
        min-height:300px;
    
    }

        .IntegrationArea div div span {
            position: absolute;
            z-index: 2;
            width: 80%;
            top: 68%;
            left: 19%;
            text-align: left;
            font-size: 2em;
            font-weight: bold;
            color: #FFFFFF;
        }

        .IntegrationArea div div p {
            position: absolute;
            z-index: 2;
            width: 85%;
            top: 85%;
            left: 19%;
            text-align: left;
            font-size: 1em;
            color: #FFFFFF;
        }

        .IntegrationArea div div img {
            margin: 2% 0%;
            width: 100%;
        }

@media (max-width: 1200px) {
    .IntegrationArea .row {
        background-image: url(/Content/images/selfDriving/integration/backup.png);
        background-size: 100% 100%;
    }

    .IntegrationArea div div span {
        top: 50%;
        font-size: 1.8em;
    }

    .IntegrationArea div div p {
        top: 68%;
        font-size: 0.95em;
    }
}

@media (max-width: 991px) {
    .IntegrationArea.row {
        background-image: url(/Content/images/selfDriving/integration/backup_xs.jpg);
        background-size: 100% auto;
    }

    .IntegrationArea div div span {
        top: 40%;
        font-size: 2em;
    }

    .IntegrationArea div div p {
        top: 60%;
        font-size: 1em;
        width: 65%;
    }
}

@media (max-width: 768px) {
    .IntegrationArea .row {
        background-image: url(/Content/images/selfDriving/integration/backup_xs.jpg);
        background-size: 100% auto;
    }

    .IntegrationArea div div span {
        top: 27%;
        font-size: 1.8em;
    }

    .IntegrationArea div div p {
        top: 42%;
        font-size: 0.9em;
        width: 65%;
    }
}

.FieldArea {
    text-align: center;
    position: relative;
}

    .FieldArea div {
        padding: 0px;
        min-height: 300px;
    }

        .FieldArea div div span {
            position: absolute;
            z-index: 2;
            width: 80%;
            top: 68%;
            left: 14%;
            text-align: left;
            font-size: 2em;
            font-weight: bold;
            color: #FFFFFF;
        }

        .FieldArea div div p {
            position: absolute;
            z-index: 2;
            width: 70%;
            top: 85%;
            left: 14%;
            text-align: left;
            font-size: 1em;
            color: #FFFFFF;
        }

        .FieldArea div div img {
            width: 100%;
        }


@media (max-width: 1200px) {
    .FieldArea div div span {
        left: 13%;
        top: 45%;
        font-size: 1.8em;
    }

    .FieldArea div div p {
        left: 13%;
        top: 62%;
        font-size: 0.95em;
    }
}

@media (max-width: 991px) {
    .FieldArea div div span {
        left: 18%;
        top: 28%;
        font-size: 2em;
    }

    .FieldArea div div p {
        left: 18%;
        top: 45%;
        font-size: 1em;
        width: 65%;
    }
}

@media (max-width: 768px) {
    .FieldArea div div span {
        left: 18%;
        top: 20%;
        font-size: 1.8em;
    }

    .FieldArea div div p {
        left: 18%;
        top: 37%;
        font-size: 0.9em;
        width: 65%;
    }
}

.ScenarioArea {
    text-align: center;
    position: relative;
}

    .ScenarioArea div {
        padding: 0px;
        min-height: 280px;
    }

        .ScenarioArea div div img {
            width: 100%;
        }

        .ScenarioArea div div span {
            position: absolute;
            z-index: 2;
            width: 68%;
            top: 38%;
            left: 16%;
            text-align: left;
            font-size: 2em;
            font-weight: bold;
            color: #1D7D90;
        }

        .ScenarioArea div div p {
            position: absolute;
            z-index: 2;
            width: 68%;
            top: 55%;
            left: 16%;
            text-align: left;
            font-size: 1em;
            color: #1D7D90;
        }

@media (max-width: 1200px) {
    .ScenarioArea div div span {
        top: 28%;
        left:15%;
        font-size: 1.8em;
    }

    .ScenarioArea div div p {
        top: 45%;
        left: 15%;
        font-size: 0.95em;
    }
}

@media (max-width: 991px) {
    .ScenarioArea div div span {
        top: 30%;
        left:18%;
        font-size: 2em;
    }

    .ScenarioArea div div p {
        top: 48%;
        left:18%;
        font-size: 1em;
        width: 65%;
    }
}

@media (max-width: 768px) {
    .ScenarioArea div div span {
        top: 21%;
        font-size: 1.8em;
    }

    .ScenarioArea div div p {
        top: 38%;
        font-size: 0.9em;
        width: 65%;
    }

    .ScenarioArea div div img {
        padding-top: 20%;
    }
}

.CollectArea {
    text-align: center;
    position: relative;
}

    .CollectArea div {
        padding: 0px;
        min-height: 300px;
    }

        .CollectArea div div span {
            position: absolute;
            z-index: 2;
            width: 68%;
            top: 60%;
            left: 16%;
            text-align: left;
            font-size: 2em;
            font-weight: bold;
            color: #FFFFFF;
        }

        .CollectArea div div p {
            position: absolute;
            z-index: 2;
            width: 68%;
            top: 77%;
            left: 16%;
            text-align: left;
            font-size: 1em;
            color: #FFFFFF;
        }

        .CollectArea div div img {
            width: 100%;
        }


@media (max-width: 1200px) {
    .CollectArea div div span {
        left: 15%;
        top: 40%;
        font-size: 1.8em;
    }

    .CollectArea div div p {
        left: 15%;
        top: 57%;
        font-size: 0.95em;
    }
}

@media (max-width: 991px) {
    .CollectArea div div span {
        left: 18%;
        top: 30%;
        font-size: 2em;
    }

    .CollectArea div div p {
        left: 18%;
        top: 47%;
        font-size: 1em;
        width: 65%;
    }
}

@media (max-width: 768px) {
    .CollectArea div div span {
        left: 18%;
        top: 19%;
        font-size: 1.8em;
    }

    .CollectArea div div p {
        left: 18%;
        top: 36%;
        font-size: 0.9em;
        width: 65%;
    }
}

.ProgramArea {
    text-align: center;
    position: relative;
}

    .ProgramArea div {
        margin: 2% 0%;
        min-height: 300px;
    }

        .ProgramArea div div span {
            position: absolute;
            z-index: 2;
            width: 80%;
            top: 40%;
            left: 16%;
            text-align: left;
            font-size: 2em;
            font-weight: bold;
            color: #1D7D90;
        }

        .ProgramArea div div p {
            position: absolute;
            z-index: 2;
            width: 60%;
            top: 57%;
            left: 16%;
            text-align: left;
            font-size: 1em;
            color: #1D7D90;
        }

        .ProgramArea div div img {
            width: 100%;
        }


@media (max-width: 1200px) {
    .ProgramArea div div span {
        left: 15%;
        top: 30%;
        font-size: 1.8em;
    }

    .ProgramArea div div p {
        left: 15%;
        top: 47%;
        font-size: 0.95em;
    }
}

@media (max-width: 991px) {
    .ProgramArea div div span {
        left: 18%;
        top: 30%;
        font-size: 2em;
    }

    .ProgramArea div div p {
        left: 18%;
        top: 48%;
        font-size: 1em;
        width: 65%;
    }
}

@media (max-width: 768px) {
    .ProgramArea div div span {
        left: 18%;
        top: 21%;
        font-size: 1.8em;
        width: 65%
    }

    .ProgramArea div div p {
        left: 18%;
        top: 50%;
        font-size: 0.9em;
        width: 65%;
    }
}