html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.logo-image {
    /* Layout Properties */
    top: 16px;
    left: 32px;
    width: 238px;
    height: 59px;
    /* UI Properties */
    background: transparent url('../img/ecom-learning-solutions-logo.jpg') 0% 0% no-repeat padding-box;
    background-size: contain;
    opacity: 1;
    margin-left: 32px;
}

header {
    box-shadow: 0px 3px 30px #00000029;
}

h1 {
    text-align: left;
    font: normal normal bold 32px/40px Source Sans Pro;
    letter-spacing: 0px;
    color: #293473;
    opacity: 1;
    margin-top:50px;
}
h2 {
    text-align: left;
    font: normal normal bold 26px/33px Source Sans Pro;
    letter-spacing: 0px;
    color: #E84520;
    opacity: 1;
    margin-bottom: 40px;
}
.example-box {
    width: 84%;
    margin-left: 8%;
    height: 500px;
    transform: matrix(1, 0, 0, 1, 0, 0);
    background: transparent url('../img/thumbnail-british-council.JPG') 0% 0% no-repeat padding-box;
    background-size: cover; background-position: center;
    border-radius: 44px;
    opacity: 1;
}
.example-textHolder {
    width: 100%;
    margin-top: -120px;
    height: auto;
    transform: matrix(1, -0.09, 0.09, 1, 0, 0);
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 20px #00000059;
    border-radius: 44px;
    opacity: 1;
    margin-bottom: 60px;
}
.example-textHolderText {
    transform: matrix(1, 0.09, -0.09, 1, 0, 0);
    padding: 60px 60px 40px 60px;
}

.textHolderContentHeading {
    text-align: left;
    font: normal normal bold 26px/33px Source Sans Pro;
    letter-spacing: 0px;
    color: #2A90CF;
    opacity: 1;
}

.textHolderContentBody {
    text-align: left;
    font: normal normal normal 20px/25px Source Sans Pro;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    padding: 14px 0 ;
}

.launchButton {
    width: 70px;
    height: 70px;
    background: #DCA205 0% 0% no-repeat padding-box;
    opacity: 1;
    border-radius: 35px;
    transition: 0.1s all;
}

    .launchButton:hover {
        background: #E84520 0% 0% no-repeat padding-box;
        opacity: 1;
        transition: 0.3s ease-out;
        cursor: pointer;
    }

.backgroundMask {
    margin-top: -217px;
    float:right;
    margin-right: -80px;
    width: 217px;
    height: 216px;
    opacity: 1;
}

.caseWidgetHolder {
    padding: 40px;
}

.arrow-icon {
    width: 70px;
    margin-top: 6px;
    padding: 20px;
}

footer {
    /* UI Properties */
    background: #2A90CF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 30px #00000029;
    opacity: 1;
    height: auto;
    white-space: normal;
}

    footer * {
        text-align: center;
        font: normal normal normal 14px/18px Source Sans Pro;
        letter-spacing: 0px;
        padding: 30px;
        color: #FFFFFF;
        opacity: 1;
        white-space: normal;
    }

@media (max-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .example-box {
        height: 300px;
    }
    .backgroundMask {
        margin-right: 0;
    }
    .textHolderContentHeading {
        font-size: 18px;
    }
    .textHolderContentBody {
        font-size: 16px;
    }
}

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */

}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */

}

@media (min-width:1281px) { /* hi-res laptops and desktops */

}