/* ------------------------------------------*/
/* ------------ INTERNAL PADDING ------------*/
/* ------------------------------------------*/

 /* padding left */
.i-pl{
    padding-left: 8.33%;
}

 /* padding right */
.i-pr{
    padding-right: 8.33%;
}

 /* padding top */
.i-pt{
    padding-top: 8.33%;
}

 /* padding bottom */
.i-pb{
    padding-bottom: 8.33%;
}


.i-pall{
    padding:  16.66% 8.33%;
}


/* ----------------------------------*/
/* ------------ ELEMENTS ------------*/
/* ----------------------------------*/

.section{
    min-height: 100vh;
    display: flex;
    align-items: center;
    vertical-align: middle;
}


img.hero-img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero-div{
    min-height: 100vh;
    display: flex;
    align-items: center;
    vertical-align: middle;
}

@media only screen and (max-width: 767px) {
    .hero-div{
        min-height: 0;
        display: flex;
        align-items: center;
        vertical-align: middle;
        display: none;
        visibility: hidden;
    }
}

img.highlight{
    width: 60%;
    height: auto;
    display: block;
    position: absolute;
    right: 0%;
    vertical-align: middle;
}

img.responsive{
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.video-align{
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-style{
    position: absolute;
    width: 70%;
    height: auto;
    border: 20px solid black;
    border-radius: 20px;
    background-color: #000;
}

/* ---------------------------------*/
/* ------------ FOOTERS ------------*/
/* ---------------------------------*/



.section-footer{
    display: flex;
    align-items:center;
    padding: 8.33%;
}


/* ---------------------------------*/
/* ------------ HERO BG ------------*/
/* ---------------------------------*/

.hero-riot{
    background: url(../img/riot/riot_hero-bg.jpg) no-repeat, radial-gradient(at 70%, #0C1C3E 0%, #030F29 100%);
    background-position: center;
    background-size: cover;
}

.hero-taxi{
    background: url(../img/taxi/taxi_hero-bg.png) no-repeat, radial-gradient(at 70%, #FFD97F 0%, #FEC12F 60%);
    background-position: center;
    background-size: cover;
}

.hero-tajawal{
    background: radial-gradient(at 70%, #F49688 0%, #E7412A 60%);
}

.hero-kawa{
    background: radial-gradient(at 70%, #A4DDF0 0%, #20A6D9 60%);
}

.hero-pitstop{
    background: url(../img/pitstop/pitstop_hero-bg.png) no-repeat, radial-gradient(at 70%, #DFFF90 0%, #8ED108 100%);
    background-position: center;
    background-size: cover;
}

.hero-iba{
    background: radial-gradient(at 70%, #F06293 0%, #E11059 100%);
}

.hero-motorola{
    background: url(../img/motorola/motorola_hero-bg.png) no-repeat, radial-gradient(at 70%, #72F6B4 0%, #31E58B 100%);
    background-position: center;
    background-size: cover;
}