.multi-factor {
    background: #9CAFB7;
    overflow: auto;
    color: black;
    overflow: auto;
    padding-bottom: 10%;
}
.multi-factor h1 {
    width: 80%;
    margin: 10% auto 5%;
    font-weight: bolder;
    font-size: 3em;
    color: black;
}

.multi-factor .heading {
    text-align: center;
}
.multi-factor .heading p {
    padding: 2% 10%;
    font-size: larger;
    margin: 0 0 5% 0;
}

.multi-factor p {
    padding: 2% 10%;
    font-size: larger;
    text-align: center;
    margin: 0 0 5% 0;
}
.multi-factor .panel {
    margin: 3%;
}
.multi-factor h2 {
    margin: 10% auto 5% auto;
    font-size: 2em;
}
.multi-factor h3 {
    margin: 0 auto 2% auto;
}
.multi-factor .panel .text {
    width : 100%;
    float : left;
}
.multi-factor .panel .text h1 {

}
.multi-factor .panel p {
    color: white;
}
.multi-factor .panel .image {
    background: gray;
    padding: 10%;
    border-radius: 25px;
}
.multi-factor .panel .image img {
    padding: 0 15%;
}
#bg-image-pins {
    background:
        /* top, transparent black, faked with gradient */
        linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(../img/passwear/multi-factor/Unlock_Screen.png);
    background-size: cover;
}
#bg-image-passwear {
    background:
        /* top, transparent black, faked with gradient */
        linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(../img/passwear/multi-factor/moto360-qr-onwrist.png);
    background-size: cover;
}
#bg-image-bio {
    background:
        /* top, transparent black, faked with gradient */
        linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(../img/passwear/multi-factor/Touch_ID_Unlock.png);
    background-size: cover;
}

/********************************************
 *
 * SMALLER TABLET TABLET TABLET VIEW 640 pixels plus
 */
@media only screen and (min-width: 640px) {
    .multi-factor .panel h2 {
        font-size: 3em;
    }
}

/********************************************
 *
 * TABLET TABLET TABLET TABLET VIEW 800 pixels plus
 */
@media only screen and (min-width: 800px) {
    .multi-factor h1 {
        margin: 10% auto 0%;
    }
    .multi-factor .heading p {
        padding: 2% 20%;
    }
    .multi-factor .panel {
        margin-top: 0;
        background: #333;
        overflow: hidden;
        border-radius: 25px;
    }
    .multi-factor .panel .text {
        width: 50%;
        float: left;
        overflow: hidden;
    }
    .multi-factor .panel .image {
        float: left;
        width: 50%;
        border-radius: 0px;
    }
    .multi-factor .panel .image img {
        padding: 5%;
    }
    .multi-factor .panel .text h2 {
        margin-top: 10%;
        font-size: 2em;
    }
    #bg-image-stronger {
        float: right;
    }
    #bg-text-stronger {
        float: right;
    }
}
/********************************************
 *
 * Medium Screens 1000 pixels plus
 */
@media only screen and (min-width: 1000px) {
    .multi-factor .panel .text h2 {
        margin-top: 20%;
    }
    .multi-factor .heading p {
        margin: 0 0 10% 0;
    }
}
/********************************************
 *
 * LARGER SCREENS
 */
@media only screen and (min-width: 1200px) {
    .multi-factor .heading p {
        margin: 0 0 0 0;
        padding: 2% 35%;
    }
    .multi-factor .panel {
        float: left;
        width: 29%;
        margin: 2%;
    }
    .multi-factor .panel .text h2 {
        font-size: 3em;
    }
    .multi-factor p {
        padding: 2% 15%;
    }
    .multi-factor .panel .text {
        width: 100%;
        float: left;
    }
    .multi-factor .panel .image {
        float: none;
        width: 100%;
    }
    .multi-factor .panel .image img {
        padding: 0% 25%;
    }
    #bg-image-stronger {
        float: none;
    }
    #bg-text-stronger {
        float: left;
    }
}