/************************************************************/
/*                        General                           */
/************************************************************/

body {
    color: #747474;
    overflow-x: hidden;
}

p {
    line-height: 170%;
    font-size: 1.1em;
    margin: 0 0 10px;
}

ul {
    list-style: none;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.fontChange {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
}

.logo1 {
    height: 150px;
    margin-top: -70px;
    padding-bottom: 10px;
}

.down {
    margin-top: 70px;
}

.up {
    margin-top: -25px;
}

.courseButtons img {
    height: 100px;
    width: 100px;
}


.pd-1 {
    padding: 1px;
}

.pd-5 {
    padding: 5px;
}

.pd-10 {
    padding: 10px;
}

.pd-20 {
    padding: 20px;
}

.pd-top-20 {
    padding-top: 20px;
}

.mr-btm-5 {
    margin-bottom: 5px;
}

.mr-btm-10 {
    margin-bottom: 10px;
}

.mr-btm-20 {
    margin-bottom: 20px;
}

.mr-top-5 {
    margin-top: 5px;
}

.mr-top-10 {
    margin-top: 10px;
}

.mr-top-20 {
    margin-top: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

    h1 small,
    h2 small,
    h3 small,
    h4 small,
    h5 small,
    h6 small,
    .h1 small,
    .h2 small,
    .h3 small,
    .h4 small,
    .h5 small,
    .h6 small,
    h1 .small,
    h2 .small,
    h3 .small,
    h4 .small,
    h5 .small,
    h6 .small,
    .h1 .small,
    .h2 .small,
    .h3 .small,
    .h4 .small,
    .h5 .small,
    .h6 .small {
        font-weight: normal;
        line-height: 1;
        color: #999;
    }

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

    h1 small,
    .h1 small,
    h2 small,
    .h2 small,
    h3 small,
    .h3 small,
    h1 .small,
    .h1 .small,
    h2 .small,
    .h2 .small,
    h3 .small,
    .h3 .small {
        font-size: 65%;
    }

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

    h4 small,
    .h4 small,
    h5 small,
    .h5 small,
    h6 small,
    .h6 small,
    h4 .small,
    .h4 .small,
    h5 .small,
    .h5 .small,
    h6 .small,
    .h6 .small {
        font-size: 75%;
    }

h1,
.h1 {
    font-size: 40px;
}

h2,
.h2 {
    font-size: 35px;
}

h3,
.h3 {
    font-size: 22px;
}

h4,
.h4 {
    font-size: 18px;
}

h5,
.h5 {
    font-size: 14px;
}

h6,
.h6 {
    font-size: 12px;
}

/************************************************************/
/*                         Extras                           */
/************************************************************/
.top_btn_online {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    color: #D75A4A;
    line-height: 0%;
    border-left: none;
    border-top: none;
    border-right: 2px solid #D75A4A;
    border-bottom: 2px solid #D75A4A;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    padding: 20% 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: #D9E8F5;
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    text-align: center;
    background: url('../images/online.png') no-repeat 50%;
}

    .top_btn_online:hover {
        position: relative;
        display: inline-block;
        font-size: 3rem;
        color: #D75A4A;
        line-height: 0%;
        border-left: 2px solid #D75A4A;
        border-top: 2px solid #D75A4A;
        border-right: none;
        border-bottom: none;
        border-radius: 50%;
        height: 200px;
        width: 200px;
        padding: 20% 0;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        background-color: #D9E8F5;
        transition: all 0.4s ease-in-out;
        transform: scale(1.1);
        text-align: center;
        background: url('../images/online.png') no-repeat 50%;
    }

.top_btn_classroom {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    color: #EDCC47;
    line-height: 0%;
    border-left: none;
    border-top: none;
    border-right: 2px solid #EDCC47;
    border-bottom: 2px solid #EDCC47;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    padding: 20% 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: #D9E8F5;
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    text-align: center;
    background: url('../images/classroom_btn.png') no-repeat 50%;
}

    .top_btn_classroom:hover {
        position: relative;
        display: inline-block;
        font-size: 3rem;
        color: #EDCC47;
        line-height: 0%;
        border-left: 2px solid #EDCC47;
        border-top: 2px solid #EDCC47;
        border-right: none;
        border-bottom: none;
        border-radius: 50%;
        height: 200px;
        width: 200px;
        padding: 20% 0;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        background-color: #D9E8F5;
        transition: all 0.4s ease-in-out;
        transform: scale(1.1);
        text-align: center;
        background: url('../images/classroom.png') no-repeat 50%;
    }

.top_btn_one_to_one {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    color: #38a164;
    line-height: 0%;
    border-left: none;
    border-top: none;
    border-right: 2px solid #38a164;
    border-bottom: 2px solid #38a164;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    padding: 20% 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: #D9E8F5;
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    text-align: center;
    background: url('../images/one-to-one.png') no-repeat 50%;
}

    .top_btn_one_to_one:hover {
        position: relative;
        display: inline-block;
        font-size: 3rem;
        color: #38a164;
        line-height: 0%;
        border-left: 2px solid #38a164;
        border-top: 2px solid #38a164;
        border-right: none;
        border-bottom: none;
        border-radius: 50%;
        height: 200px;
        width: 200px;
        padding: 20% 0;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        background-color: #D9E8F5;
        transition: all 0.4s ease-in-out;
        transform: scale(1.1);
        text-align: center;
        background: url('../images/one-to-one.png') no-repeat 50%;
    }

.top_btn_in_house {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    color: #8697CB;
    line-height: 0%;
    border-left: none;
    border-top: none;
    border-right: 2px solid #8697CB;
    border-bottom: 2px solid #8697CB;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    padding: 20% 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: #D9E8F5;
    transition: all 0.4s ease-in-out;
    transform: scale(1);
    text-align: center;
    background: url('../images/in-house.png') no-repeat 50%;
}

    .top_btn_in_house:hover {
        position: relative;
        display: inline-block;
        font-size: 3rem;
        color: #8697CB;
        line-height: 0%;
        border-left: 2px solid #8697CB;
        border-top: 2px solid #8697CB;
        border-right: none;
        border-bottom: none;
        border-radius: 50%;
        height: 200px;
        width: 200px;
        padding: 20% 0;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        background-color: #D9E8F5;
        transition: all 0.4s ease-in-out;
        transform: scale(1.1);
        text-align: center;
        background: url('../images/In_house.png') no-repeat 50%;
    }


.top_btn_online {
    text-decoration: none !important;
    background: #fff;
    margin: 0 0 0 25px;
    background: url('../images/computer (1).png') no-repeat 50%;
}

.top_btn_classroom {
    text-decoration: none !important;
    background: #fff;
    margin: 0 0 0 25px;
    background: url('../images/classroom_btn.png') no-repeat 50%;
}

.top_btn_one_to_one {
    text-decoration: none !important;
    background: #fff;
    margin: 0 0 0 25px;
    background: url('../images/one-to-one-btn.png') no-repeat 50%;
}

.top_btn_in_house {
    text-decoration: none !important;
    background: #fff;
    margin: 0 0 0 25px;
    background: url('../images/in-house-btn.png') no-repeat 50%;
}


.close-modal {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

    .close-modal:hover,
    .close-modal:focus {
        color: #a94442;
        text-decoration: none;
        cursor: pointer;
        filter: alpha(opacity=50);
        opacity: .5;
    }

button.close-modal {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

    .modal.fade .modal-dialog {
        -webkit-transition: -webkit-transform .3s ease-out;
        -moz-transition: -moz-transform .3s ease-out;
        -o-transition: -o-transform .3s ease-out;
        transition: transform .3s ease-out;
        -webkit-transform: translate(0, -25%);
        -ms-transform: translate(0, -25%);
        transform: translate(0, -25%);
    }

    .modal.in .modal-dialog {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal-content {
    position: relative;
    margin-top: 100px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #888;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 15px;
    outline: none;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

    .modal-backdrop.fade {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    .modal-backdrop.in {
        filter: alpha(opacity=50);
        opacity: .5;
    }

.modal-header {
    min-height: 16.42857143px;
    padding: 15px;
    background: #ECECEC;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    text-transform: uppercase;
}

    .modal-header .close {
        margin-top: -2px;
    }

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-body {
    position: relative;
    padding: 20px;
}

.modal-footer {
    padding: 19px 20px 20px;
    margin-top: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

    .modal-footer .btn + .btn {
        margin-bottom: 0;
        margin-left: 5px;
    }

    .modal-footer .btn-group .btn + .btn {
        margin-left: -1px;
    }

    .modal-footer .btn-block + .btn-block {
        margin-left: 0;
    }

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }

    .modal-sm {
        width: 300px;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}


/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        opacity: 1\9;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
        opacity: 1\9;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        opacity: 1\9;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

.fade-in-onload {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

    /*.fade-in.one {
        -webkit-animation-delay: 0.7s;
        -moz-animation-delay: 0.7s;
        animation-delay: 0.7s;
    }*/

    .fade-in-onload.one-onload {
        -webkit-animation-delay: 0.7s;
        -moz-animation-delay: 0.7s;
        animation-delay: 0.7s;
    }

    /*.fade-in.two {
        -webkit-animation-delay: 1.2s;
        -moz-animation-delay: 1.2s;
        animation-delay: 1.2s;
    }*/

    .fade-in-onload.two-onload {
        -webkit-animation-delay: 1.2s;
        -moz-animation-delay: 1.2s;
        animation-delay: 1.2s;
    }

/*.fade-in.three {
        -webkit-animation-delay: 1.6s;
        -moz-animation-delay: 1.6s;
        animation-delay: 1.6s;
    }

    .fade-in.four {
        -webkit-animation-delay: 2.1s;
        -moz-animation-delay: 2.1s;
        animation-delay: 2.1s;
    }

    .fade-in.five {
        -webkit-animation-delay: 2.5s;
        -moz-animation-delay: 2.5s;
        animation-delay: 2.5s;
    }

    .fade-in.six {
        -webkit-animation-delay: 2.9s;
        -moz-animation-delay: 2.9s;
        animation-delay: 2.9s;
    }

    .fade-in.seven {
        -webkit-animation-delay: 3.4s;
        -moz-animation-delay: 3.4s;
        animation-delay: 3.4s;
    }

    .fade-in.eight {
        -webkit-animation-delay: 3.8s;
        -moz-animation-delay: 3.8s;
        animation-delay: 3.8s;
    }

    .fade-in.nine {
        -webkit-animation-delay: 4.2s;
        -moz-animation-delay: 4.2s;
        animation-delay: 4.2s;
    }

    .fade-in.ten {
        -webkit-animation-delay: 4.7s;
        -moz-animation-delay: 4.7s;
        animation-delay: 4.7s;
    }

    .fade-in.eleven {
        -webkit-animation-delay: 5.1s;
        -moz-animation-delay: 5.1s;
        animation-delay: 5.1s;
    }

    .fade-in.twelve {
        -webkit-animation-delay: 5.5s;
        -moz-animation-delay: 5.5s;
        animation-delay: 5.5s;
    }

    .fade-in.thirteen {
        -webkit-animation-delay: 5.9s;
        -moz-animation-delay: 5.9s;
        animation-delay: 5.9s;
    }

    .fade-in.fourteen {
        -webkit-animation-delay: 6.4s;
        -moz-animation-delay: 6.4s;
        animation-delay: 6.4s;
    }

    .fade-in.fifteen {
        -webkit-animation-delay: 6.9s;
        -moz-animation-delay: 6.9s;
        animation-delay: 6.9s;
    }*/

/*---make a basic box ---*/
.box {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 10px;
    color: white;
    padding: 40px;
    float: left;
    border: 1px solid #fff;
    background: #27a5d2;
    border-radius: 10px;
}

.gov-nhs {
    position: relative;
    padding: 10px;
    border: 2px solid #444;
    border-radius: 15px;
    background: #fff;
    text-decoration: none;
    color: #444;
}

    .gov-nhs:hover {
        position: relative;
        padding: 10px;
        border: 2px solid #fff;
        border-radius: 15px;
        background: #444;
        text-decoration: none;
        color: #fff;
    }


.more-info-button {
    display: block;
    margin: 0 auto;
    border: 2px solid #fff !important;
    background: #777;
    border: none;
    font-size: 19px;
    font-weight: normal;
    color: #FFF;
    text-align: center;
    width: 180px;
    height: 40px;
    line-height: 37px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    cursor: pointer;
    -webkit-appearance: none;
}

    .more-info-button:hover, .more-info-button:hover {
        background: #888;
        color: #fff;
        border: 2px solid #fff;
    }

.dynamics {
    border: 1px solid #666;
    text-decoration: none;
    font-size: 1.5rem;
    padding-left: 17px;
    padding: 10px;
    background: #0092ff;
    color: #fff;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

    .dynamics:hover {
        border: 1px dashed #666;
        padding-left: 17px;
        padding: 10px;
        background: #fff;
        color: #0092ff;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 0px;
        -webkit-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
    }


.moc-video {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}

    .moc-video iframe {
        box-sizing: border-box;
        background: url(../images/mcsa-screen.png) center center no-repeat;
        background-size: contain;
        padding: 3.3% 8.8% 20%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


.rollover_table a {
    color: #ffffff;
    text-decoration: none;
}

    .rollover_table a:hover {
        color: #ffffff;
    }

.rollover_table span {
    font-size: 12px;
    margin: auto;
}

.rollover_table th, td {
    border: none;
}

.rollover_table th {
    border: none;
    width: 280px;
    vertical-align: middle;
}

    .rollover_table th div {
        display: inline-block;
        padding-bottom: 5px;
    }

        .rollover_table th div a {
            text-align: left;
            border: 1px solid white;
            display: inline-block;
            max-width: 100%;
            text-align: center;
            width: 100px;
            height: 80px;
            vertical-align: middle;
            color: #fff;
            background-color: #4298EF;
            cursor: pointer;
        }

            .rollover_table th div a:hover {
                text-align: left;
                border: 1px solid white;
                display: inline-block;
                max-width: 100%;
                text-align: center;
                width: 100px;
                height: 80px;
                vertical-align: middle;
                color: #fff;
                background-color: #666;
                cursor: pointer;
            }

.roll_right_box {
    width: 600px;
    max-width: 100%;
}

@import url(http://fonts.googleapis.com/css?family=Expletus+Sans:600);
/*==========SCALE-IN==========*/
@-webkit-keyframes scale-in {
    0% {
        transform: scale(10, 10);
        opacity: 0;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

@keyframes scale-in {
    0% {
        transform: scale(10, 10);
        opacity: 0;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
/*==========ROLL-OUT==========*/
@-webkit-keyframes roll-out {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes roll-out {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.grey_area {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,rgba(85, 85, 85, 0.10)), color-stop(50%,rgba(232, 232, 232, 0.22)));
}

.breakOne {
    background-color: #4298ef;
}

.how-can-help {
    color: #fff;
}

.topBorder {
    border-top: 4px solid #4298ef;
}

.hrline {
    margin-top: 10px;
    border-top: 1px solid white;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
}

footer {
    color: #fff;
}


.freeTrial-img {
    width: 100%;
}

.aplus-laptop {
    background-image: url('../../images/aplus-laptop.png');
    background-repeat: no-repeat;
    width: auto;
    height: 410px;
}

.laptop-410 {
    background-image: url('../../images/410-laptop.png');
    background-repeat: no-repeat;
    width: auto;
    height: 410px;
}

.laptop-413 {
    background-image: url('../../images/413-laptop.png');
    background-repeat: no-repeat;
    width: auto;
    height: 410px;
}

.laptop-461 {
    background-image: url('../../images/461-laptop.png');
    background-repeat: no-repeat;
    width: auto;
    height: 410px;
}

.laptop-346 {
    background-image: url('../../images/346-laptop.png');
    background-repeat: no-repeat;
    width: auto;
    height: 410px;
}

.laptop-246 {
    background-image: url('../../images/246-laptop.png');
    background-repeat: no-repeat;
    width: auto;
    height: 410px;
}

.laptop-680 {
    background-image: url('../../images/680-laptop.png');
    background-repeat: no-repeat;
    width: auto;
    height: 410px;
}

.laptop-687 {
    background-image: url('../../images/687-laptop.png');
    background-repeat: no-repeat;
    width: auto;
    height: 410px;
}

.mcsa-screen {
    background-image: url('../../images/mcsa-screen.png');
    background-repeat: no-repeat;
    width: auto;
    height: 450px;
}

.teambuilding {
    background-image: url('../../images/teambuilding.png');
    background-repeat: no-repeat;
    width: auto;
    height: 450px;
}

.convenience {
    background-image: url('../../images/convenience.png');
    background-repeat: no-repeat;
    width: auto;
    height: 450px;
}

#course-box1 {
    border: 1px dashed #fff;
    padding: 10px;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #0072C6;
}

#course-box2 {
    border: 1px dashed #fff;
    padding: 10px;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #ba0000;
}

#course-box3 {
    border: 1px dashed #fff;
    padding: 10px;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #EB3C00;
}

#course-box4 {
    border: 1px dashed #fff;
    padding: 10px;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #029a87;
}

#course-box5 {
    border: 1px dashed #fff;
    padding: 10px;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #180052;
}

#course-box6 {
    border: 1px dashed #fff;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #00188F;
}

#course-box7 {
    border: 1px dashed #fff;
    padding: 10px;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #cbc444;
    background-color: #ad69f2;
}

#course-box8 {
    border: 1px dashed #fff;
    padding: 10px;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #44bfc7;
}

#course-box9 {
    border: 1px dashed #fff;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #cbc444;
}

#course-box10 {
    border: 1px dashed #fff;
    padding: 10px;
    height: 300px;
    width: auto;
    margin: 10px;
    background-color: #207245;
}

.lab-box {
    border: 1px solid #888;
    height: 250px;
    background-image: url('../../img/img-2.png');
    width: auto;
    margin: 10px;
    background-color: #fff;
}


.text-box-sml1 {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
}

.text-box-sml2 {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
}

.text-box-sml3 {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
}

.text-box {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.img-box {
    height: 180px;
    width: auto;
    padding: 25px;
}

.qualLinks {
    text-decoration: none;
}

.zoomBox {
    max-width: 100%;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

    .zoomBox:hover {
        box-shadow: 0px 0px 50px #000000;
        z-index: 2;
        -webkit-transition: all 200ms ease-in;
        -webkit-transform: scale(1.1);
        -ms-transition: all 200ms ease-in;
        -ms-transform: scale(1.1);
        -moz-transition: all 200ms ease-in;
        -moz-transform: scale(1.1);
        transition: all 200ms ease-in;
        transform: scale(1.1);
    }

@media only screen and (max-width: 400px) {
    .learningStyle {
        font-size: 0.5em;
    }


    #info {
        background: url("../../images/info.png") no-repeat scroll 1.2em center #E2ECEE;
        border: 2px solid #9DDAE6;
        color: #444444;
        font-size: 12px;
        margin-bottom: 1.5em;
        padding: 1em 1.5em 1em 3.5em;
        width: 100%;
    }
}


/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.cl-effect-1 a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

    .cl-effect-2 a span {
        position: relative;
        display: inline-block;
        padding: 0 14px;
        background: #2195de;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

.csstransforms3d .cl-effect-2 a span::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0965a0;
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
    background: #28a2ee;
}

/* Effect 3: bottom line slides/fades in */
.cl-effect-3 a {
    padding: 8px 0;
}

    .cl-effect-3 a::after {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 4px;
        background: rgba(0,0,0,0.1);
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: opacity 0.3s, -moz-transform 0.3s;
        transition: opacity 0.3s, transform 0.3s;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }

    .cl-effect-3 a:hover::after,
    .cl-effect-3 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

/* Effect 4: bottom border enlarge */
.cl-effect-4 a {
    padding: 0 0 10px;
}

    .cl-effect-4 a::after {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 1px;
        background: #fff;
        content: '';
        opacity: 0;
        -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
        transition: height 0.3s, opacity 0.3s, transform 0.3s;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .cl-effect-4 a:hover::after,
    .cl-effect-4 a:focus::after {
        height: 5px;
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

/* Effect 5: same word slide in */
.cl-effect-5 a {
    overflow: hidden;
    padding: 0 4px;
    height: 1em;
}

    .cl-effect-5 a span {
        position: relative;
        display: inline-block;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
    }

        .cl-effect-5 a span::before {
            position: absolute;
            top: 100%;
            content: attr(data-hover);
            font-weight: 700;
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

    .cl-effect-5 a:hover span,
    .cl-effect-5 a:focus span {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
    }

/* Effect 5: same word slide in and border bottom */
.cl-effect-6 a {
    margin: 0 10px;
    padding: 10px 20px;
}

    .cl-effect-6 a::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        content: '';
        -webkit-transition: top 0.3s;
        -moz-transition: top 0.3s;
        transition: top 0.3s;
    }

    .cl-effect-6 a::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 2px;
        background: #fff;
        content: '';
        -webkit-transition: height 0.3s;
        -moz-transition: height 0.3s;
        transition: height 0.3s;
    }

    .cl-effect-6 a:hover::before {
        top: 100%;
        opacity: 1;
    }

    .cl-effect-6 a:hover::after {
        height: 100%;
    }

/* Effect 7: second border slides up */
.cl-effect-7 a {
    padding: 12px 10px 10px;
    color: #566473;
    text-shadow: none;
    font-weight: 700;
}

    .cl-effect-7 a::before,
    .cl-effect-7 a::after {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 3px;
        background: #566473;
        content: '';
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform: scale(0.85);
        -moz-transform: scale(0.85);
        transform: scale(0.85);
    }

    .cl-effect-7 a::after {
        opacity: 0;
        -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
        transition: top 0.3s, opacity 0.3s, transform 0.3s;
    }

    .cl-effect-7 a:hover::before,
    .cl-effect-7 a:hover::after,
    .cl-effect-7 a:focus::before,
    .cl-effect-7 a:focus::after {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

    .cl-effect-7 a:hover::after,
    .cl-effect-7 a:focus::after {
        top: 0%;
        opacity: 1;
    }

/* Effect 8: border slight translate */
.cl-effect-8 a {
    padding: 10px 20px;
}

    .cl-effect-8 a::before,
    .cl-effect-8 a::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid #354856;
        content: '';
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
    }

    .cl-effect-8 a::after {
        border-color: #fff;
        opacity: 0;
        -webkit-transform: translateY(-7px) translateX(6px);
        -moz-transform: translateY(-7px) translateX(6px);
        transform: translateY(-7px) translateX(6px);
    }

    .cl-effect-8 a:hover::before,
    .cl-effect-8 a:focus::before {
        opacity: 0;
        -webkit-transform: translateY(5px) translateX(-5px);
        -moz-transform: translateY(5px) translateX(-5px);
        transform: translateY(5px) translateX(-5px);
    }

    .cl-effect-8 a:hover::after,
    .cl-effect-8 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0px);
        -moz-transform: translateY(0px) translateX(0px);
        transform: translateY(0px) translateX(0px);
    }

/* Effect 9: second text and borders */
.cl-effect-9 a {
    margin: 0 20px;
    padding: 18px 20px;
}

    .cl-effect-9 a::before,
    .cl-effect-9 a::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #fff;
        content: '';
        opacity: 0.2;
        -webkit-transition: opacity 0.3s, height 0.3s;
        -moz-transition: opacity 0.3s, height 0.3s;
        transition: opacity 0.3s, height 0.3s;
    }

    .cl-effect-9 a::after {
        top: 100%;
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .cl-effect-9 a span:first-child {
        z-index: 2;
        display: block;
        font-weight: 300;
    }

    .cl-effect-9 a span:last-child {
        z-index: 1;
        display: block;
        padding: 8px 0 0 0;
        color: rgba(0,0,0,0.4);
        text-shadow: none;
        text-transform: none;
        font-style: italic;
        font-size: 0.75em;
        font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .cl-effect-9 a:hover::before,
    .cl-effect-9 a:focus::before {
        height: 6px;
    }

    .cl-effect-9 a:hover::before,
    .cl-effect-9 a:hover::after,
    .cl-effect-9 a:focus::before,
    .cl-effect-9 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

    .cl-effect-9 a:hover span:last-child,
    .cl-effect-9 a:focus span:last-child {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        transform: translateY(0%);
    }

/* Effect 10: reveal, push out */
.cl-effect-10 {
    position: relative;
    z-index: 1;
}

    .cl-effect-10 a {
        overflow: hidden;
        margin: 0 15px;
    }

        .cl-effect-10 a span {
            display: block;
            padding: 10px 20px;
            background: #0f7c67;
            -webkit-transition: -webkit-transform 0.3s;
            -moz-transition: -moz-transform 0.3s;
            transition: transform 0.3s;
        }

        .cl-effect-10 a::before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            padding: 10px 20px;
            width: 100%;
            height: 100%;
            background: #fff;
            color: #0f7c67;
            content: attr(data-hover);
            -webkit-transition: -webkit-transform 0.3s;
            -moz-transition: -moz-transform 0.3s;
            transition: transform 0.3s;
            -webkit-transform: translateX(-25%);
        }

        .cl-effect-10 a:hover span,
        .cl-effect-10 a:focus span {
            -webkit-transform: translateX(100%);
            -moz-transform: translateX(100%);
            transform: translateX(100%);
        }

        .cl-effect-10 a:hover::before,
        .cl-effect-10 a:focus::before {
            -webkit-transform: translateX(0%);
            -moz-transform: translateX(0%);
            transform: translateX(0%);
        }

/* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
.cl-effect-11 a {
    padding: 10px 0;
    border-top: 2px solid #0972b4;
    color: #0972b4;
    text-shadow: none;
}

    .cl-effect-11 a::before {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        padding: 10px 0;
        max-width: 0;
        border-bottom: 2px solid #fff;
        color: #fff;
        content: attr(data-hover);
        -webkit-transition: max-width 0.5s;
        -moz-transition: max-width 0.5s;
        transition: max-width 0.5s;
    }

    .cl-effect-11 a:hover::before,
    .cl-effect-11 a:focus::before {
        max-width: 100%;
    }

/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.cl-effect-12 a::after {
    width: 90px;
    height: 90px;
    border-width: 6px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.cl-effect-12 a:hover::before,
.cl-effect-12 a:hover::after,
.cl-effect-12 a:focus::before,
.cl-effect-12 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Effect 13: three circles */
.cl-effect-13 a {
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

    .cl-effect-13 a::before {
        position: absolute;
        top: 100%;
        left: 50%;
        color: transparent;
        content: '•';
        text-shadow: 0 0 transparent;
        font-size: 1.2em;
        -webkit-transition: text-shadow 0.3s, color 0.3s;
        -moz-transition: text-shadow 0.3s, color 0.3s;
        transition: text-shadow 0.3s, color 0.3s;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%);
        pointer-events: none;
    }

    .cl-effect-13 a:hover::before,
    .cl-effect-13 a:focus::before {
        color: #fff;
        text-shadow: 10px 0 #fff, -10px 0 #fff;
    }

    .cl-effect-13 a:hover,
    .cl-effect-13 a:focus {
        color: #ba7700;
    }

/* Effect 14: border switch */
.cl-effect-14 a {
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
}

    .cl-effect-14 a::before,
    .cl-effect-14 a::after {
        position: absolute;
        width: 45px;
        height: 2px;
        background: #fff;
        content: '';
        opacity: 0.2;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        pointer-events: none;
    }

    .cl-effect-14 a::before {
        top: 0;
        left: 0;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .cl-effect-14 a::after {
        right: 0;
        bottom: 0;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: 100% 0;
        -moz-transform-origin: 100% 0;
        transform-origin: 100% 0;
    }

    .cl-effect-14 a:hover::before,
    .cl-effect-14 a:hover::after,
    .cl-effect-14 a:focus::before,
    .cl-effect-14 a:focus::after {
        opacity: 1;
    }

    .cl-effect-14 a:hover::before,
    .cl-effect-14 a:focus::before {
        left: 50%;
        -webkit-transform: rotate(0deg) translateX(-50%);
        -moz-transform: rotate(0deg) translateX(-50%);
        transform: rotate(0deg) translateX(-50%);
    }

    .cl-effect-14 a:hover::after,
    .cl-effect-14 a:focus::after {
        right: 50%;
        -webkit-transform: rotate(0deg) translateX(50%);
        -moz-transform: rotate(0deg) translateX(50%);
        transform: rotate(0deg) translateX(50%);
    }

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
    color: rgba(0,0,0,0.2);
    font-weight: 700;
    text-shadow: none;
}

    .cl-effect-15 a::before {
        color: #fff;
        content: attr(data-hover);
        position: absolute;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
    }

    .cl-effect-15 a:hover::before,
    .cl-effect-15 a:focus::before {
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
    }

/* Effect 16: fall down */
.cl-effect-16 a {
    color: #6f8686;
    text-shadow: 0 0 1px rgba(111,134,134,0.3);
}

    .cl-effect-16 a::before {
        color: #fff;
        content: attr(data-hover);
        position: absolute;
        opacity: 0;
        text-shadow: 0 0 1px rgba(255,255,255,0.3);
        -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
        -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
        transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        pointer-events: none;
    }

    .cl-effect-16 a:hover::before,
    .cl-effect-16 a:focus::before {
        -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
        -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
        transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
        opacity: 1;
    }

/* Effect 17: move up fade out, push border */
.cl-effect-17 a {
    color: #10649b;
    text-shadow: none;
    padding: 10px 0;
}

    .cl-effect-17 a::before {
        color: #fff;
        text-shadow: 0 0 1px rgba(255,255,255,0.3);
        content: attr(data-hover);
        position: absolute;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        pointer-events: none;
    }

    .cl-effect-17 a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        opacity: 0;
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        transform: translateY(5px);
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        pointer-events: none;
    }

    .cl-effect-17 a:hover::before,
    .cl-effect-17 a:focus::before {
        opacity: 0;
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    .cl-effect-17 a:hover::after,
    .cl-effect-17 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

/* Effect 18: cross */
.cl-effect-18 {
    position: relative;
    z-index: 1;
}

    .cl-effect-18 a {
        padding: 0 5px;
        color: #b4770d;
        font-weight: 700;
        -webkit-transition: color 0.3s;
        -moz-transition: color 0.3s;
        transition: color 0.3s;
    }

        .cl-effect-18 a::before,
        .cl-effect-18 a::after {
            position: absolute;
            width: 100%;
            left: 0;
            top: 50%;
            height: 2px;
            margin-top: -1px;
            background: #b4770d;
            content: '';
            z-index: -1;
            -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
            -moz-transition: -moz-transform 0.3s, opacity 0.3s;
            transition: transform 0.3s, opacity 0.3s;
            pointer-events: none;
        }

        .cl-effect-18 a::before {
            -webkit-transform: translateY(-20px);
            -moz-transform: translateY(-20px);
            transform: translateY(-20px);
        }

        .cl-effect-18 a::after {
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            transform: translateY(20px);
        }

        .cl-effect-18 a:hover,
        .cl-effect-18 a:focus {
            color: #fff;
        }

            .cl-effect-18 a:hover::before,
            .cl-effect-18 a:hover::after,
            .cl-effect-18 a:focus::before,
            .cl-effect-18 a:focus::after {
                opacity: 0.7;
            }

            .cl-effect-18 a:hover::before,
            .cl-effect-18 a:focus::before {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .cl-effect-18 a:hover::after,
            .cl-effect-18 a:focus::after {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

/* Effect 19: 3D side */
.cl-effect-19 a {
    line-height: 2em;
    margin: 15px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    width: 200px;
}

    .cl-effect-19 a span {
        position: relative;
        display: inline-block;
        width: 100%;
        padding: 0 14px;
        background: #e35041;
        -webkit-transition: -webkit-transform 0.4s, background 0.4s;
        -moz-transition: -moz-transform 0.4s, background 0.4s;
        transition: transform 0.4s, background 0.4s;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50% -100px;
        -moz-transform-origin: 50% 50% -100px;
        transform-origin: 50% 50% -100px;
    }

.csstransforms3d .cl-effect-19 a span::before {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #b53a2d;
    content: attr(data-hover);
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    transition: background 0.4s;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    transform-origin: 0 50%;
    pointer-events: none;
}

.cl-effect-19 a:hover span,
.cl-effect-19 a:focus span {
    background: #b53a2d;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}

.csstransforms3d .cl-effect-19 a:hover span::before,
.csstransforms3d .cl-effect-19 a:focus span::before {
    background: #ef5e50;
}

/* Effect 20: 3D side */
.cl-effect-20 a {
    line-height: 2em;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}

    .cl-effect-20 a span {
        position: relative;
        display: inline-block;
        padding: 3px 15px 0;
        background: #587285;
        box-shadow: inset 0 3px #2f4351;
        -webkit-transition: background 0.6s;
        -moz-transition: background 0.6s;
        transition: background 0.6s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }

        .cl-effect-20 a span::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            color: #2f4351;
            content: attr(data-hover);
            -webkit-transform: rotateX(270deg);
            -moz-transform: rotateX(270deg);
            transform: rotateX(270deg);
            -webkit-transition: -webkit-transform 0.6s;
            -moz-transition: -moz-transform 0.6s;
            transition: transform 0.6s;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            pointer-events: none;
        }

    .cl-effect-20 a:hover span,
    .cl-effect-20 a:focus span {
        background: #2f4351;
    }

        .cl-effect-20 a:hover span::before,
        .cl-effect-20 a:focus span::before {
            -webkit-transform: rotateX(10deg);
            -moz-transform: rotateX(10deg);
            transform: rotateX(10deg);
        }

/* Effect 21: borders slight translate */
.cl-effect-21 a {
    padding: 10px;
    color: #237546;
    font-weight: 700;
    text-shadow: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

    .cl-effect-21 a::before,
    .cl-effect-21 a::after {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        -moz-transition: opacity 0.3s, -moz-transform 0.3s;
        transition: opacity 0.3s, transform 0.3s;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .cl-effect-21 a::before {
        top: 0;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .cl-effect-21 a::after {
        bottom: 0;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }

    .cl-effect-21 a:hover,
    .cl-effect-21 a:focus {
        color: #fff;
    }

        .cl-effect-21 a:hover::before,
        .cl-effect-21 a:focus::before,
        .cl-effect-21 a:hover::after,
        .cl-effect-21 a:focus::after {
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            transform: translateY(0px);
        }


/*--------- Special Offer Blinker --------*/
.blink_me {
    color: red;
    font-weight: 800;
    font-size: 15px;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@-webkit-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}



/************************************************************/
/*                       Top Links                          */
/************************************************************/

.topContact span {
    color: #000;
}

.topContact li {
    display: inline-block;
}

    .topContact li:nth-of-type(5):before {
        content: "|";
        padding-right: 10px;
        padding-left: 10px;
    }

    .topContact li:nth-of-type(4):before {
        content: "|";
        padding-right: 10px;
        padding-left: 10px;
    }

    .topContact li:nth-of-type(3):before {
        content: "|";
        padding-right: 10px;
        padding-left: 10px;
    }

    .topContact li a {
        color: #666;
        text-decoration: none;
        -webkit-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
    }

        .topContact li a:hover {
            color: #0092ff;
            text-decoration: none;
            text-shadow: 0 0 5px #878787;
            -webkit-transition: 500ms linear 0s;
            -moz-transition: 500ms linear 0s;
            -o-transition: 500ms linear 0s;
            transition: 500ms linear 0s;
            outline: 0 none;
        }

.bottomLink {
    margin-top: 0px;
}

    .bottomLink li a:hover {
        color: #0092ff;
    }

.darker {
    background-color: rgba(232, 232, 232, 0.9);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border: solid thin;
    box-shadow: 6px 6px 4px rgba(135, 135, 135, 0.5);
    border-top: none;
}


/************************************************************/
/*                        Header                            */
/************************************************************/
header ul {
    display: inline-block;
}

    header ul li {
        display: inline-block;
        line-height: 68px;
    }

        header ul li a {
            color: #666;
            font-size: 1.8rem;
            text-decoration: none;
            padding-right: 20px;
            -webkit-transition: 0.25s ease-in-out;
            transition: 0.25s ease-in-out;
        }

            header ul li a:hover {
                color: #F00;
                text-decoration: none;
            }

/************************************************************/
/*                     Price Match Box                      */
/************************************************************/

.priceMatchBox {
    width: 270px;
    height: 50px;
    margin-left: -140px;
    margin-top: 10px;
    padding-top: 10px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background-color: #666;
    border: solid thin #000;
    border-bottom: none;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

/************************************************************/
/*                          Menu                            */
/************************************************************/
.courseButtons {
    background: #E8E8E8;
    box-shadow: 0px 0px 5px #d0d0d0, 0px -5px 10px #d0d0d0;
}

    .courseButtons .row {
        padding: 10px 0;
    }

    .courseButtons img {
        vertical-align: top;
        position: relative;
        filter: none;
        -webkit-filter: grayscale(0);
        -webkit-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
    }

        .courseButtons img:hover {
            filter: gray; /* IE6-9 */
            filter: grayscale(1); /* Firefox 35+ */
            -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
        }

    .courseButtons a {
        font-size: 1.1em;
        color: #666;
        text-decoration: none;
        padding: 10px;
        -webkit-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
    }

        .courseButtons a:hover {
            color: #0092ff;
        }


/* Dropdown Button */
.dropbtn {
    font-size: 1.1em;
    color: #666;
    text-decoration: none;
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
    z-index: 1;
    font-weight: 500;
    border: none;
    background-color: transparent;
    text-transform: capitalize;
}

    /* Dropdown button on hover & focus */
    .dropbtn:hover, .dropbtn:focus {
        background-color: transparent;
    }

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #E8E8E8;
    min-width: 270px;
    z-index: 1;
    left: -63px;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}


/************************************************************/
/*                       Background                         */
/************************************************************/

.bar {
    width: 100%;
    height: 530px;
    background: -moz-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
    background: -webkit-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
    background: -ms-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
    background: linear-gradient(161deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
    opacity: 0.3;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 265px !important;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-animation: roll-out 1.2s ease-out;
    -moz-animation: roll-out 1.2s ease-out;
    animation: roll-out 1.2s ease-out;
}

.heroTextArea {
    margin-top: 0px;
}

    .heroTextArea p {
        position: relative;
        font-size: 18px;
        -webkit-animation: scale-in 0.8s ease-out;
        -moz-animation: scale-in 0.8s ease-out;
        animation: scale-in 0.8s ease-out;
    }

    .heroTextArea h1 {
        position: relative;
        -webkit-animation: scale-in 1.0s ease-out;
        -moz-animation: scale-in 1.0s ease-out;
        animation: scale-in 1.0s ease-out;
    }


.heroImage {
    background: url(../../images/bgImageDark.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageAplus {
    background: url(../images/bgAplus.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

    .heroImageAplus p {
        font-size: 19px;
    }

.heroImageMobility {
    background: url(../images/bgMobility.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

    .heroImageMobility p {
        font-size: 19px;
    }

.heroImageCloud {
    background: url(../images/bgCloud.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

    .heroImageCloud p {
        font-size: 19px;
    }

.heroImageNetwork {
    background: url(../images/bgNetwork.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

    .heroImageNetwork p {
        font-size: 19px;
    }

.heroImageSecurity {
    background: url(../images/bgSecurity.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

    .heroImageSecurity p {
        font-size: 19px;
    }

.heroImageLinux {
    background: url(../images/bgLinux.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

    .heroImageLinux p {
        font-size: 19px;
    }

.heroImageOther {
    background: url(../images/bgOther.jpg) no-repeat center center;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    padding-bottom: 130px;
    z-index: -1;
}

    .heroImageOther p {
        font-size: 19px;
    }


.heroImageOther {
    background: url(../../images/bgOther.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageNHS {
    background: url(../../images/bgNHS.png) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageTwo {
    background: url(../../img/img-2.png) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

    .heroImageTwo .partner {
        padding-bottom: 100px;
    }

.heroImageOffice365 {
    background: url(../../images/bgOffice365.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImagePackage {
    background: url(../../images/bgPackage.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageMOS {
    background: url(../../images/bgMOS.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}


.heroImageWindows10 {
    background: url(../../images/bgImageWindow10.jpg) no-repeat center center fixed;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}


.heroImageMTA {
    background: url(../../images/bgMTA.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageClassroom {
    background: url(../../images/bgClassroom.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageMCSA {
    background: url(../../images/bgMCSA.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageMOC {
    background: url(../../images/bg-moc-on-demand.png) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageDesktop {
    background: url(../../images/bgDesktop.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageSQL {
    background: url(../../images/bgSQL.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageServer {
    background: url(../../images/bgServer.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageAzure {
    background: url(../../images/bg-azure.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageProgramming {
    background: url(../../images/bgProgramming.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageMCSE {
    background: url(../../images/bgMCSE.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageContact {
    background: url(../../images/bgContactus.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageContact1 {
    background: url(../../images/bgContact.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageAbout {
    background: url(../../images/bgAbout.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageDemo {
    background: url(../../images/bgDemo.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageSorry {
    background: url(../../images/bgSorry.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageCancel {
    background: url(../../images/bgCancelled.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImage404 {
    background: url(../../images/bg404.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageThankyou {
    background: url(../../images/bgThankyou.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}

.heroImageCorp {
    background: url(../../images/bgCorp.jpg) no-repeat center center;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 530px;
    width: 100%;
    color: white;
    padding: 100px;
    z-index: -1;
}


/************** Example of hero image working/**************/

/*.heroImageCorp {
    background: url(../../images/bgCorp.jpg) no-repeat center center fixed;
    background-attachment: fixed !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    height: 400px;
    width: 100%;
    color: white;
    padding: 100px;
    padding-bottom: 130px;
    z-index: -1;
}*/


.downArrow {
    content: url('../../images/scroll_down.png');
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
    position: relative;
    -webkit-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}

    .downArrow:hover {
        content: url('../../images/scroll_down_hover.png');
        opacity: 0.8;
        -webkit-transition: 0.6s ease-in-out;
        transition: 0.6s ease-in-out;
    }

.backArrow {
    content: url('../../images/go_back.png');
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
    position: relative;
    -webkit-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}

    .backArrow:hover {
        content: url('../../images/go_back_hover.png');
        opacity: 0.8;
        -webkit-transition: 0.6s ease-in-out;
        transition: 0.6s ease-in-out;
    }


/************************************************************/
/*                         Banner                           */
/************************************************************/

.banner1 {
    background: #66B2FF;
    font-size: 1.5em;
    color: #fff;
    box-shadow: 0 4px 4px -2px #666;
    -moz-box-shadow: 0 4px 4px -2px #666;
    -webkit-box-shadow: 0 4px 4px -2px #666;
}

    .banner1 span {
        font-weight: 500;
    }

    .banner1 a {
        color: rgba(255, 255, 255, 0.9);
    }

        .banner1 a:hover {
            color: rgba(255, 255, 255, 0.6);
        }


.banner2 {
    z-index: 10000;
    background: #2470BD;
    font-size: 1.4em;
    padding: 5px;
    color: #fff;
    box-shadow: 0 4px 4px -2px #666;
    -moz-box-shadow: 0 4px 4px -2px #666;
    -webkit-box-shadow: 0 4px 4px -2px #666;
}


/************************************************************/
/*                          Main                            */
/************************************************************/
.mainInfo {
    margin-top: 20px;
}

    .mainInfo h3 {
        font-size: 25px;
        border-bottom: 1px solid black;
        display: inline-block;
    }

    .mainInfo p {
        text-align: justify;
    }

.mainInfo1 p {
    text-align: justify;
}

.logos span {
    display: inline-block;
    padding: 5px;
    padding-bottom: 20px;
}

    .logos span a .comptia {
        height: 80px;
    }


.included h4 {
    font-size: 25px;
    border-bottom: 1px solid black;
}

textarea {
    resize: none;
}

.aboutRight {
    margin: 30px auto;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    border-radius: 150px;
    background-size: contain;
    background-image: url('../../images/front-office.jpg');
    background-repeat: no-repeat;
    background-position: 100%;
}

.aboutLeft {
    margin: 60px auto;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    border-radius: 150px;
    background-size: contain;
    background-image: url('../../images/what-we-do.jpg');
    background-repeat: no-repeat;
    background-position: 100%;
}

.thankyouRight {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    padding: 15px;
    border: 1px solid black;
    border-radius: 150px;
    background-size: contain;
    background-image: url('../../images/thankyouRight_.jpg');
    background-repeat: no-repeat;
    background-position: 100%;
}

.cancelRight {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    padding: 15px;
    border: 1px solid black;
    border-radius: 150px;
    background-size: contain;
    background-image: url('../../images/thankyouRight_.jpg');
    background-repeat: no-repeat;
    background-position: 100%;
}


.sorryRight {
    margin: -30px auto;
    margin-right: 10px;
    width: 350px;
    height: 350px;
    border: 1px solid black;
    border-radius: 200px;
    background-size: contain;
    background-image: url('../../images/sorryRight.png');
    background-repeat: no-repeat;
    background-position: 100%;
}

.bgForm {
    background-color: #e8e8e8;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: solid thin #0092ff;
}

.bgFormEnd {
    background-color: #e8e8e8;
    border-radius: 5px;
    border: solid 2px #cf0505;
    padding: 10px;
    margin-bottom: 20px;
}


.bgFormTech {
    background-color: #e8e8e8;
    border-radius: 5px;
    border: solid 2px #0092ff;
    padding: 10px;
    margin-bottom: 20px;
}

#requestDemo {
    content: url('../../images/buttons/requestDemo.jpg');
    z-index: 1;
    display: inline-block;
    text-decoration: none;
    margin-right: 15px;
    border-radius: 10px;
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

    #requestDemo:hover {
        content: url('../../images/buttons/requestDemoHover.jpg');
        z-index: 9;
        box-shadow: 0 0 5px #878787;
        -webkit-transition: 500ms linear 0s;
        -moz-transition: 500ms linear 0s;
        -o-transition: 500ms linear 0s;
        transition: 500ms linear 0s;
    }

#testimonialOne {
    background-image: url('../../images/testimonial1.png');
    border-radius: 15px;
    color: #fff;
    padding: 10px;
    width: auto;
}

    #testimonialOne span {
        color: #fff;
    }

#testimonialTwo {
    background-image: url('../../images/testimonial.png');
    border-radius: 15px;
    color: #000;
    padding: 15px;
    width: auto;
}

#office365 {
    border-radius: 6px;
}

#mosoffice365 {
    border-radius: 6px;
}

.middleArea {
    margin-left: 50px;
}


td span .smallButton {
    border: solid thin 1px !important;
    color: #0092ff;
}


.logo-btns {
    display: inline-block;
    margin: 20px;
    padding: 18px;
    border: 2px solid #696969;
    box-shadow: 5px 5px 5px #8d8d8d;
    border-radius: 5px;
    color: #000;
    white-space: nowrap;
    overflow: visible;
    height: 80px;
    width: auto;
}

.compTIA-btn {
    display: inline-block;
    width: 250px;
    height: 53px;
    background-image: url('../../images/comptia-btn.png');
    background-repeat: no-repeat;
}

.cisco-btn {
    display: inline-block;
    width: 250px;
    height: 53px;
    background-image: url('../../images/cisco-btn.png');
    background-repeat: no-repeat;
}



/************************************************************/
/*                        Package                           */
/************************************************************/

#bronze, #silver, #gold, #platinum {
    display: inline-block;
}


.bronzeHeader {
    text-transform: capitalize;
    font-size: 1.5em;
    background-color: #965A38;
    border-bottom: 20px solid #79492e;
    color: #fff;
    width: 290px;
    text-shadow: 2px 2px #000;
    border: solid thin black;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 5px;
}

.bronzeContent {
    font-size: 1em;
    border: solid thin #000;
}

.silverHeader {
    text-transform: capitalize;
    font-size: 1.5em;
    background-color: #A8A8A8;
    border-bottom: 20px solid #828282;
    color: #fff;
    width: 290px;
    text-shadow: 2px 2px #000;
    border: solid thin black;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 5px;
}

.silverContent {
    font-size: 1em;
    border: solid thin #000;
}

.goldHeader {
    text-transform: capitalize;
    font-size: 1.5em;
    background-color: #D9A441;
    border-bottom: 20px solid #b28736;
    color: #fff;
    width: 290px;
    text-shadow: 2px 2px #000;
    border: solid thin black;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 5px;
}

.goldContent {
    font-size: 1em;
    border: solid thin #000;
}


.platinumHeader {
    text-transform: capitalize;
    font-size: 1.5em;
    background-color: #e2e5e4;
    color: #fff;
    width: 290px;
    padding: 5px;
    text-shadow: 2px 2px #000;
    border: solid thin black;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.platinumContent {
    font-size: 1em;
    border: solid thin #000;
}



/************************************************************/
/*                       slidebox                           */
/************************************************************/

#slidebox {
    width: 190px;
    height: 310px;
    padding: 10px;
    background-color: #fff;
    border-top: 3px solid #0092ff;
    position: fixed;
    bottom: 50px;
    right: -430px;
    -moz-box-shadow: -2px 0px 5px #aaa;
    -webkit-box-shadow: -2px 0px 5px #aaa;
    box-shadow: -2px 0px 5px #aaa;
}

    #slidebox p, a.more {
        font-size: 12px;
        font-family: Arial,Helvetica,sans-serif;
        letter-spacing: 1px;
        color: #555;
    }

a.more {
    cursor: pointer;
    color: #0092ff;
    text-decoration: none;
    text-transform: uppercase;
}

    a.more:hover {
        text-decoration: underline;
    }

#slidebox h2 {
    color: #0092ff;
    font-size: 19px;
    font-weight: bold;
    margin: 10px 20px 10px 0px;
}

a.close1 {
    background: transparent url(../../images/close.gif) no-repeat top left;
    width: 13px;
    height: 13px;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
}

    a.close1:hover {
        background-position: 0px -13px;
    }

/************************************************************/
/*                       inline-form                        */
/************************************************************/
.input-area {
    padding: 10px;
}

.form-inline {
    display: inline;
}

.outline-form {
    border: 1px solid #777;
    background: rgba(31, 140, 245, 0.1);
    border-radius: 15px;
    padding: 10px;
}


/************************************************************/
/*                      Contact Page                        */
/************************************************************/

.contact-list {
    padding-left: 24px;
}

.phone-icon {
    list-style-image: url("../../images/phone16.png");
    padding: 5px;
}

.email-icon {
    list-style-image: url("../../images/close13.png");
    padding: 5px;
}

.address-icon {
    list-style-image: url("../../images/map6.png");
    padding-left: 5px;
}

#map-canvas {
    width: auto;
    height: 400px;
    border: solid 2px #999;
    border-radius: 5px;
    background-color: #CCC;
    padding: 50px;
    margin-top: 10px;
}

/************************************************************/
/*                      MOC ON-Demand                       */
/************************************************************/

/* classes */

.fl {
    float: left;
}

.fr {
    float: right;
}

.cb {
    clear: both;
}

.button-info, a.button-demo, .pill {
    display: block;
    text-decoration: none;
    margin: 0 auto;
    border: 2px solid #fff !important;
    background: #777 !important;
    border: none;
    font-size: 19px !important;
    font-weight: normal !important;
    color: #FFF !important;
    text-align: center;
    width: 180px;
    height: 40px;
    line-height: 37px !important;
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    border-radius: 15px !important;
    cursor: pointer;
    -webkit-appearance: none;
}

    .button-info:hover, a.button-demo:hover {
        background: #fff !important;
        border: 2px solid #777 !important;
        color: #777 !important;
    }

input[type=submit][disabled]:hover {
    background: #575756;
    cursor: default;
}

.three-col {
    width: 33.33%;
    text-align: center;
}

#get-in-touch-form .input {
    color: #777;
}

/* get in touch */
.get-in-touch {
    background: #59a4f1;
    border-top: 2px solid #adadad;
    /*box-shadow: 0px 0px 10px 5px #c8c8c8;*/
}


#get-in-touch {
    background: #59a4f1;
}

    #get-in-touch .three-col {
        font-size: 14px;
        color: #FFF;
    }

        #get-in-touch .three-col p {
            margin: 0 0 20px 0;
        }

        #get-in-touch .three-col .icon {
            width: 22.65%;
            margin: 0 auto 10% auto;
        }

        #get-in-touch .three-col .inner {
            width: 71%;
            margin: 0 auto;
        }

        #get-in-touch .three-col .heading {
            font-size: 25px;
        }

    #get-in-touch .button:hover {
        background: #F6F6F6;
        border: 2px solid #777 !important;
        color: #575756;
    }


    #get-in-touch input[type=text], #get-in-touch input[type=email] {
        display: inline-block;
        margin: 0 0 4.5% 0;
        border-radius: 15px;
        padding: 9px 4.5%;
    }

    #get-in-touch input[type=text] {
        width: 38.29%;
    }

        #get-in-touch input[type=text] + input[type=text] {
            margin: 0 0 0 5.42%;
        }

    #get-in-touch input[type=email] + input[type=text] {
        margin: 0 0 0 5.42%;
    }

    #get-in-touch input[type=email] {
        width: 38.29%;
    }

    #get-in-touch .three-col .tel {
        font-size: 20px;
    }

    #get-in-touch h2 {
        color: #FFF;
        text-align: center;
    }

    #get-in-touch h3 {
        color: #444;
        text-align: center;
    }


@media (min-width: 980px) {
    .content {
        padding: 40px 30px;
    }
}

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

    h3 {
        font-size: 21px;
    }

    .section {
        min-height: 0;
        padding: 10% 0;
    }

    .content {
        padding: 5% 30px 5% 30px;
    }

    #get-in-touch .three-col {
        width: 100%;
        float: none;
        margin: 0 0 5% 0;
    }

    #right-col {
        display: none;
    }

    #left-col {
        width: 100%;
        float: none;
        margin: 0 0 5% 0;
    }
}


/************************************************************/
/*                        Footer                            */
/************************************************************/

footer {
    background: grey;
    padding-top: 30px;
}

    footer h3 {
        font-size: 20px;
    }

    footer li {
        list-style: none;
        color: white;
    }

/*********************************************************************************/
/* Icons                                                                         */
/* Powered by Font Awesome by Dave Gandy | http://fontawesome.io                 */
/* Licensed under the SIL OFL 1.1 (font), MIT (CSS)                              */
/*********************************************************************************/

.fa {
    text-decoration: none;
}

    .fa.solo span {
        display: none;
    }

    .fa:before {
        display: inline-block;
        text-decoration: none;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
    }

.fa-lg {
    font-size: 1.3333333333333333em;
    line-height: .75em;
    vertical-align: -15%;
}

.fa-2x {
    font-size: 2em;
}

.fa-3x {
    font-size: 3em;
}

.fa-4x {
    font-size: 4em;
}

.fa-5x {
    font-size: 5em;
}

.fa-fw {
    width: 1.2857142857142858em;
    text-align: center;
}

.fa-ul {
    padding-left: 0;
    margin-left: 2.142857142857143em;
    list-style-type: none;
}

    .fa-ul > li {
        position: relative;
    }

.fa-li {
    position: absolute;
    left: -2.142857142857143em;
    width: 2.142857142857143em;
    top: .14285714285714285em;
    text-align: center;
}

    .fa-li.fa-lg {
        left: -1.8571428571428572em;
    }

.fa-border {
    padding: .2em .25em .15em;
    border: solid .08em #eee;
    border-radius: .1em;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

.fa.pull-left {
    margin-right: .3em;
}

.fa.pull-right {
    margin-left: .3em;
}

.fa-spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(359deg);
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.fa-rotate-10 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

    .fa-rotate-10:hover {
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        -webkit-transform: rotate(33deg);
        -moz-transform: rotate(33deg);
        -ms-transform: rotate(33deg);
        -o-transform: rotate(33deg);
        transform: rotate(33deg);
    }

.fa-rotate-45 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.fa-rotate-90 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.fa-rotate-180 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.fa-rotate-270 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

.fa-flip-horizontal {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.fa-flip-vertical {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
    -webkit-transform: scale(1, -1);
    -moz-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    transform: scale(1, -1);
}

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

.fa-stack-1x {
    line-height: inherit;
}

.fa-stack-2x {
    font-size: 2em;
}

.fa-inverse {
    color: #fff;
}

.fa-glass:before {
    content: "\f000";
}

.fa-music:before {
    content: "\f001";
}

.fa-search:before {
    content: "\f002";
}

.fa-envelope-o:before {
    content: "\f003";
}

.fa-heart:before {
    content: "\f004";
}

.fa-star:before {
    content: "\f005";
}

.fa-star-o:before {
    content: "\f006";
}

.fa-user:before {
    content: "\f007";
}

.fa-film:before {
    content: "\f008";
}

.fa-th-large:before {
    content: "\f009";
}

.fa-th:before {
    content: "\f00a";
}

.fa-th-list:before {
    content: "\f00b";
}

.fa-check:before {
    content: "\f00c";
    color: #ED3B6F;
}

.fa-times:before {
    content: "\f00d";
}

.fa-search-plus:before {
    content: "\f00e";
}

.fa-search-minus:before {
    content: "\f010";
}

.fa-power-off:before {
    content: "\f011";
}

.fa-signal:before {
    content: "\f012";
}

.fa-gear:before, .fa-cog:before {
    content: "\f013";
}

.fa-trash-o:before {
    content: "\f014";
}

.fa-home:before {
    content: "\f015";
}

.fa-file-o:before {
    content: "\f016";
}

.fa-clock-o:before {
    content: "\f017";
}

.fa-road:before {
    content: "\f018";
}

.fa-download:before {
    content: "\f019";
}

.fa-arrow-circle-o-down:before {
    content: "\f01a";
}

.fa-arrow-circle-o-up:before {
    content: "\f01b";
}

.fa-inbox:before {
    content: "\f01c";
}

.fa-play-circle-o:before {
    content: "\f01d";
}

.fa-rotate-right:before, .fa-repeat:before {
    content: "\f01e";
}

.fa-refresh:before {
    content: "\f021";
}

.fa-list-alt:before {
    content: "\f022";
}

.fa-lock:before {
    content: "\f023";
}

.fa-flag:before {
    content: "\f024";
}

.fa-headphones:before {
    content: "\f025";
}

.fa-volume-off:before {
    content: "\f026";
}

.fa-volume-down:before {
    content: "\f027";
}

.fa-volume-up:before {
    content: "\f028";
}

.fa-qrcode:before {
    content: "\f029";
}

.fa-barcode:before {
    content: "\f02a";
}

.fa-tag:before {
    content: "\f02b";
}

.fa-tags:before {
    content: "\f02c";
}

.fa-book:before {
    content: "\f02d";
}

.fa-bookmark:before {
    content: "\f02e";
}

.fa-print:before {
    content: "\f02f";
}

.fa-camera:before {
    content: "\f030";
}

.fa-font:before {
    content: "\f031";
}

.fa-bold:before {
    content: "\f032";
}

.fa-italic:before {
    content: "\f033";
}

.fa-text-height:before {
    content: "\f034";
}

.fa-text-width:before {
    content: "\f035";
}

.fa-align-left:before {
    content: "\f036";
}

.fa-align-center:before {
    content: "\f037";
}

.fa-align-right:before {
    content: "\f038";
}

.fa-align-justify:before {
    content: "\f039";
}

.fa-list:before {
    content: "\f03a";
}

.fa-dedent:before, .fa-outdent:before {
    content: "\f03b";
}

.fa-indent:before {
    content: "\f03c";
}

.fa-video-camera:before {
    content: "\f03d";
}

.fa-picture-o:before {
    content: "\f03e";
}

.fa-pencil:before {
    content: "\f040";
}

.fa-map-marker:before {
    content: "\f041";
}

.fa-adjust:before {
    content: "\f042";
}

.fa-tint:before {
    content: "\f043";
}

.fa-edit:before, .fa-pencil-square-o:before {
    content: "\f044";
}

.fa-share-square-o:before {
    content: "\f045";
}

.fa-check-square-o:before {
    content: "\f046";
}

.fa-move:before {
    content: "\f047";
}

.fa-step-backward:before {
    content: "\f048";
}

.fa-fast-backward:before {
    content: "\f049";
}

.fa-backward:before {
    content: "\f04a";
}

.fa-play:before {
    content: "\f04b";
}

.fa-pause:before {
    content: "\f04c";
}

.fa-stop:before {
    content: "\f04d";
}

.fa-forward:before {
    content: "\f04e";
}

.fa-fast-forward:before {
    content: "\f050";
}

.fa-step-forward:before {
    content: "\f051";
}

.fa-eject:before {
    content: "\f052";
}

.fa-chevron-left:before {
    content: "\f053";
}

.fa-chevron-right:before {
    content: "\f054";
}

.fa-plus-circle:before {
    content: "\f055";
}

.fa-minus-circle:before {
    content: "\f056";
}

.fa-times-circle:before {
    content: "\f057";
}

.fa-check-circle:before {
    content: "\f058";
}

.fa-question-circle:before {
    content: "\f059";
}

.fa-info-circle:before {
    content: "\f05a";
}

.fa-crosshairs:before {
    content: "\f05b";
}

.fa-times-circle-o:before {
    content: "\f05c";
}

.fa-check-circle-o:before {
    content: "\f05d";
}

.fa-ban:before {
    content: "\f05e";
}

.fa-arrow-left:before {
    content: "\f060";
}

.fa-arrow-right:before {
    content: "\f061";
}

.fa-arrow-up:before {
    content: "\f062";
}

.fa-arrow-down:before {
    content: "\f063";
}

.fa-mail-forward:before, .fa-share:before {
    content: "\f064";
}

.fa-resize-full:before {
    content: "\f065";
}

.fa-resize-small:before {
    content: "\f066";
}

.fa-plus:before {
    content: "\f067";
}

.fa-minus:before {
    content: "\f068";
}

.fa-asterisk:before {
    content: "\f069";
}

.fa-exclamation-circle:before {
    content: "\f06a";
}

.fa-gift:before {
    content: "\f06b";
}

.fa-leaf:before {
    content: "\f06c";
}

.fa-fire:before {
    content: "\f06d";
}

.fa-eye:before {
    content: "\f06e";
}

.fa-eye-slash:before {
    content: "\f070";
}

.fa-warning:before, .fa-exclamation-triangle:before {
    content: "\f071";
}

.fa-plane:before {
    content: "\f072";
}

.fa-calendar:before {
    content: "\f073";
}

.fa-random:before {
    content: "\f074";
}

.fa-comment:before {
    content: "\f075";
}

.fa-magnet:before {
    content: "\f076";
}

.fa-chevron-up:before {
    content: "\f077";
}

.fa-chevron-down:before {
    content: "\f078";
}

.fa-retweet:before {
    content: "\f079";
}

.fa-shopping-cart:before {
    content: "\f07a";
}

.fa-folder:before {
    content: "\f07b";
}

.fa-folder-open:before {
    content: "\f07c";
}

.fa-resize-vertical:before {
    content: "\f07d";
}

.fa-resize-horizontal:before {
    content: "\f07e";
}

.fa-bar-chart-o:before {
    content: "\f080";
}

.fa-twitter-square:before {
    content: "\f081";
}

.fa-facebook-square:before {
    content: "\f082";
}

.fa-camera-retro:before {
    content: "\f083";
}

.fa-key:before {
    content: "\f084";
}

.fa-gears:before, .fa-cogs:before {
    content: "\f085";
}

.fa-comments:before {
    content: "\f086";
}

.fa-thumbs-o-up:before {
    content: "\f087";
}

.fa-thumbs-o-down:before {
    content: "\f088";
}

.fa-star-half:before {
    content: "\f089";
}

.fa-heart-o:before {
    content: "\f08a";
}

.fa-sign-out:before {
    content: "\f08b";
}

.fa-linkedin-square:before {
    content: "\f08c";
}

.fa-thumb-tack:before {
    content: "\f08d";
}

.fa-external-link:before {
    content: "\f08e";
}

.fa-sign-in:before {
    content: "\f090";
}

.fa-trophy:before {
    content: "\f091";
}

.fa-github-square:before {
    content: "\f092";
}

.fa-upload:before {
    content: "\f093";
}

.fa-lemon-o:before {
    content: "\f094";
}

.fa-phone:before {
    content: "\f095";
}

.fa-square-o:before {
    content: "\f096";
}

.fa-bookmark-o:before {
    content: "\f097";
}

.fa-phone-square:before {
    content: "\f098";
}

.fa-twitter:before {
    content: "\f099";
}

.fa-facebook:before {
    content: "\f09a";
}

.fa-github:before {
    content: "\f09b";
}

.fa-unlock:before {
    content: "\f09c";
}

.fa-credit-card:before {
    content: "\f09d";
}

.fa-rss:before {
    content: "\f09e";
}

.fa-hdd-o:before {
    content: "\f0a0";
}

.fa-bullhorn:before {
    content: "\f0a1";
}

.fa-bell:before {
    content: "\f0f3";
}

.fa-certificate:before {
    content: "\f0a3";
}

.fa-hand-o-right:before {
    content: "\f0a4";
}

.fa-hand-o-left:before {
    content: "\f0a5";
}

.fa-hand-o-up:before {
    content: "\f0a6";
}

.fa-hand-o-down:before {
    content: "\f0a7";
}

.fa-arrow-circle-left:before {
    content: "\f0a8";
}

.fa-arrow-circle-right:before {
    content: "\f0a9";
}

.fa-arrow-circle-up:before {
    content: "\f0aa";
}

.fa-arrow-circle-down:before {
    content: "\f0ab";
}

.fa-globe:before {
    content: "\f0ac";
}

.fa-wrench:before {
    content: "\f0ad";
}

.fa-tasks:before {
    content: "\f0ae";
}

.fa-filter:before {
    content: "\f0b0";
}

.fa-briefcase:before {
    content: "\f0b1";
}

.fa-fullscreen:before {
    content: "\f0b2";
}

.fa-group:before {
    content: "\f0c0";
}

.fa-chain:before, .fa-link:before {
    content: "\f0c1";
}

.fa-cloud:before {
    content: "\f0c2";
}

.fa-flask:before {
    content: "\f0c3";
}

.fa-cut:before, .fa-scissors:before {
    content: "\f0c4";
}

.fa-copy:before, .fa-files-o:before {
    content: "\f0c5";
}

.fa-paperclip:before {
    content: "\f0c6";
}

.fa-save:before, .fa-floppy-o:before {
    content: "\f0c7";
}

.fa-square:before {
    content: "\f0c8";
}

.fa-reorder:before {
    content: "\f0c9";
}

.fa-list-ul:before {
    content: "\f0ca";
}

.fa-list-ol:before {
    content: "\f0cb";
}

.fa-strikethrough:before {
    content: "\f0cc";
}

.fa-underline:before {
    content: "\f0cd";
}

.fa-table:before {
    content: "\f0ce";
}

.fa-magic:before {
    content: "\f0d0";
}

.fa-truck:before {
    content: "\f0d1";
}

.fa-pinterest:before {
    content: "\f0d2";
}

.fa-pinterest-square:before {
    content: "\f0d3";
}

.fa-google-plus-square:before {
    content: "\f0d4";
}

.fa-google-plus:before {
    content: "\f0d5";
}

.fa-money:before {
    content: "\f0d6";
}

.fa-caret-down:before {
    content: "\f0d7";
}

.fa-caret-up:before {
    content: "\f0d8";
}

.fa-caret-left:before {
    content: "\f0d9";
}

.fa-caret-right:before {
    content: "\f0da";
}

.fa-columns:before {
    content: "\f0db";
}

.fa-unsorted:before, .fa-sort:before {
    content: "\f0dc";
}

.fa-sort-down:before, .fa-sort-asc:before {
    content: "\f0dd";
}

.fa-sort-up:before, .fa-sort-desc:before {
    content: "\f0de";
}

.fa-envelope:before {
    content: "\f0e0";
}

.fa-linkedin:before {
    content: "\f0e1";
}

.fa-rotate-left:before, .fa-undo:before {
    content: "\f0e2";
}

.fa-legal:before, .fa-gavel:before {
    content: "\f0e3";
}

.fa-dashboard:before, .fa-tachometer:before {
    content: "\f0e4";
}

.fa-comment-o:before {
    content: "\f0e5";
}

.fa-comments-o:before {
    content: "\f0e6";
}

.fa-flash:before, .fa-bolt:before {
    content: "\f0e7";
}

.fa-sitemap:before {
    content: "\f0e8";
}

.fa-umbrella:before {
    content: "\f0e9";
}

.fa-paste:before, .fa-clipboard:before {
    content: "\f0ea";
}

.fa-lightbulb-o:before {
    content: "\f0eb";
}

.fa-exchange:before {
    content: "\f0ec";
}

.fa-cloud-download:before {
    content: "\f0ed";
}

.fa-cloud-upload:before {
    content: "\f0ee";
}

.fa-user-md:before {
    content: "\f0f0";
}

.fa-stethoscope:before {
    content: "\f0f1";
}

.fa-suitcase:before {
    content: "\f0f2";
}

.fa-bell-o:before {
    content: "\f0a2";
}

.fa-coffee:before {
    content: "\f0f4";
}

.fa-cutlery:before {
    content: "\f0f5";
}

.fa-file-text-o:before {
    content: "\f0f6";
}

.fa-building:before {
    content: "\f0f7";
}

.fa-hospital:before {
    content: "\f0f8";
}

.fa-ambulance:before {
    content: "\f0f9";
}

.fa-medkit:before {
    content: "\f0fa";
}

.fa-fighter-jet:before {
    content: "\f0fb";
}

.fa-beer:before {
    content: "\f0fc";
}

.fa-h-square:before {
    content: "\f0fd";
}

.fa-plus-square:before {
    content: "\f0fe";
}

.fa-angle-double-left:before {
    content: "\f100";
}

.fa-angle-double-right:before {
    content: "\f101";
}

.fa-angle-double-up:before {
    content: "\f102";
}

.fa-angle-double-down:before {
    content: "\f103";
}

.fa-angle-left:before {
    content: "\f104";
}

.fa-angle-right:before {
    content: "\f105";
}

.fa-angle-up:before {
    content: "\f106";
}

.fa-angle-down:before {
    content: "\f107";
}

.fa-desktop:before {
    content: "\f108";
}

.fa-laptop:before {
    content: "\f109";
}

.fa-tablet:before {
    content: "\f10a";
}

.fa-mobile-phone:before, .fa-mobile:before {
    content: "\f10b";
}

.fa-circle-o:before {
    content: "\f10c";
}

.fa-quote-left:before {
    content: "\f10d";
}

.fa-quote-right:before {
    content: "\f10e";
}

.fa-spinner:before {
    content: "\f110";
}

.fa-circle:before {
    content: "\f111";
}

.fa-mail-reply:before, .fa-reply:before {
    content: "\f112";
}

.fa-github-alt:before {
    content: "\f113";
}

.fa-folder-o:before {
    content: "\f114";
}

.fa-folder-open-o:before {
    content: "\f115";
}

.fa-expand-o:before {
    content: "\f116";
}

.fa-collapse-o:before {
    content: "\f117";
}

.fa-smile-o:before {
    content: "\f118";
}

.fa-frown-o:before {
    content: "\f119";
}

.fa-meh-o:before {
    content: "\f11a";
}

.fa-gamepad:before {
    content: "\f11b";
}

.fa-keyboard-o:before {
    content: "\f11c";
}

.fa-flag-o:before {
    content: "\f11d";
}

.fa-flag-checkered:before {
    content: "\f11e";
}

.fa-terminal:before {
    content: "\f120";
}

.fa-code:before {
    content: "\f121";
}

.fa-reply-all:before {
    content: "\f122";
}

.fa-mail-reply-all:before {
    content: "\f122";
}

.fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before {
    content: "\f123";
}

.fa-location-arrow:before {
    content: "\f124";
}

.fa-crop:before {
    content: "\f125";
}

.fa-code-fork:before {
    content: "\f126";
}

.fa-unlink:before, .fa-chain-broken:before {
    content: "\f127";
}

.fa-question:before {
    content: "\f128";
}

.fa-info:before {
    content: "\f129";
}

.fa-exclamation:before {
    content: "\f12a";
}

.fa-superscript:before {
    content: "\f12b";
}

.fa-subscript:before {
    content: "\f12c";
}

.fa-eraser:before {
    content: "\f12d";
}

.fa-puzzle-piece:before {
    content: "\f12e";
}

.fa-microphone:before {
    content: "\f130";
}

.fa-microphone-slash:before {
    content: "\f131";
}

.fa-shield:before {
    content: "\f132";
}

.fa-calendar-o:before {
    content: "\f133";
}

.fa-fire-extinguisher:before {
    content: "\f134";
}

.fa-rocket:before {
    content: "\f135";
}

.fa-maxcdn:before {
    content: "\f136";
}

.fa-chevron-circle-left:before {
    content: "\f137";
}

.fa-chevron-circle-right:before {
    content: "\f138";
}

.fa-chevron-circle-up:before {
    content: "\f139";
}

.fa-chevron-circle-down:before {
    content: "\f13a";
}

.fa-html5:before {
    content: "\f13b";
}

.fa-css3:before {
    content: "\f13c";
}

.fa-anchor:before {
    content: "\f13d";
}

.fa-unlock-o:before {
    content: "\f13e";
}

.fa-bullseye:before {
    content: "\f140";
}

.fa-ellipsis-horizontal:before {
    content: "\f141";
}

.fa-ellipsis-vertical:before {
    content: "\f142";
}

.fa-rss-square:before {
    content: "\f143";
}

.fa-play-circle:before {
    content: "\f144";
}

.fa-ticket:before {
    content: "\f145";
}

.fa-minus-square:before {
    content: "\f146";
}

.fa-minus-square-o:before {
    content: "\f147";
}

.fa-level-up:before {
    content: "\f148";
}

.fa-level-down:before {
    content: "\f149";
}

.fa-check-square:before {
    content: "\f14a";
}

.fa-pencil-square:before {
    content: "\f14b";
}

.fa-external-link-square:before {
    content: "\f14c";
}

.fa-share-square:before {
    content: "\f14d";
}

.fa-compass:before {
    content: "\f14e";
}

.fa-toggle-down:before, .fa-caret-square-o-down:before {
    content: "\f150";
}

.fa-toggle-up:before, .fa-caret-square-o-up:before {
    content: "\f151";
}

.fa-toggle-right:before, .fa-caret-square-o-right:before {
    content: "\f152";
}

.fa-euro:before, .fa-eur:before {
    content: "\f153";
}

.fa-gbp:before {
    content: "\f154";
}

.fa-dollar:before, .fa-usd:before {
    content: "\f155";
}

.fa-rupee:before, .fa-inr:before {
    content: "\f156";
}

.fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before {
    content: "\f157";
}

.fa-ruble:before, .fa-rouble:before, .fa-rub:before {
    content: "\f158";
}

.fa-won:before, .fa-krw:before {
    content: "\f159";
}

.fa-bitcoin:before, .fa-btc:before {
    content: "\f15a";
}

.fa-file:before {
    content: "\f15b";
}

.fa-file-text:before {
    content: "\f15c";
}

.fa-sort-alpha-asc:before {
    content: "\f15d";
}

.fa-sort-alpha-desc:before {
    content: "\f15e";
}

.fa-sort-amount-asc:before {
    content: "\f160";
}

.fa-sort-amount-desc:before {
    content: "\f161";
}

.fa-sort-numeric-asc:before {
    content: "\f162";
}

.fa-sort-numeric-desc:before {
    content: "\f163";
}

.fa-thumbs-up:before {
    content: "\f164";
}

.fa-thumbs-down:before {
    content: "\f165";
}

.fa-youtube-square:before {
    content: "\f166";
}

.fa-youtube:before {
    content: "\f167";
}

.fa-xing:before {
    content: "\f168";
}

.fa-xing-square:before {
    content: "\f169";
}

.fa-youtube-play:before {
    content: "\f16a";
}

.fa-dropbox:before {
    content: "\f16b";
}

.fa-stack-overflow:before {
    content: "\f16c";
}

.fa-instagram:before {
    content: "\f16d";
}

.fa-flickr:before {
    content: "\f16e";
}

.fa-adn:before {
    content: "\f170";
}

.fa-bitbucket:before {
    content: "\f171";
}

.fa-bitbucket-square:before {
    content: "\f172";
}

.fa-tumblr:before {
    content: "\f173";
}

.fa-tumblr-square:before {
    content: "\f174";
}

.fa-long-arrow-down:before {
    content: "\f175";
}

.fa-long-arrow-up:before {
    content: "\f176";
}

.fa-long-arrow-left:before {
    content: "\f177";
}

.fa-long-arrow-right:before {
    content: "\f178";
}

.fa-apple:before {
    content: "\f179";
}

.fa-windows:before {
    content: "\f17a";
}

.fa-android:before {
    content: "\f17b";
}

.fa-linux:before {
    content: "\f17c";
}

.fa-dribbble:before {
    content: "\f17d";
}

.fa-skype:before {
    content: "\f17e";
}

.fa-foursquare:before {
    content: "\f180";
}

.fa-trello:before {
    content: "\f181";
}

.fa-female:before {
    content: "\f182";
}

.fa-male:before {
    content: "\f183";
}

.fa-gittip:before {
    content: "\f184";
}

.fa-sun-o:before {
    content: "\f185";
}

.fa-moon-o:before {
    content: "\f186";
}

.fa-archive:before {
    content: "\f187";
}

.fa-bug:before {
    content: "\f188";
}

.fa-vk:before {
    content: "\f189";
}

.fa-weibo:before {
    content: "\f18a";
}

.fa-renren:before {
    content: "\f18b";
}

.fa-pagelines:before {
    content: "\f18c";
}

.fa-stack-exchange:before {
    content: "\f18d";
}

.fa-arrow-circle-o-right:before {
    content: "\f18e";
}

.fa-arrow-circle-o-left:before {
    content: "\f190";
}

.fa-toggle-left:before, .fa-caret-square-o-left:before {
    content: "\f191";
}

.fa-dot-circle-o:before {
    content: "\f192";
}

.fa-wheelchair:before {
    content: "\f193";
}

.fa-vimeo-square:before {
    content: "\f194";
}

.fa-turkish-lira:before, .fa-try:before {
    content: "\f195";
}

.fa-cubes:before {
    content: "\f1b3";
}

.fa-server:before {
    content: "\f233";
}

.fa-phone-square:before {
    content: "\f098";
}

.fa-phone:before {
    content: "\f095";
}

.fa-graduation-cap:before {
    content: "\f19d";
}

.fa-university:before {
    content: "\f19c";
}

/************************************************************/
/*                         Icons                            */
/************************************************************/
#iconHoverTwitter:hover {
    content: url('../../Images/twitterhover.png');
    width: 50px;
    height: 50px;
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

#iconHoverFacebook:hover {
    content: url('../../Images/facebookhover.png');
    width: 50px;
    height: 50px;
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

#iconHoverLinkedin:hover {
    content: url('../../Images/linkedinhover.png');
    width: 50px;
    height: 50px;
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

.followIcon li {
    display: inline-block;
    padding: 20px;
}

/************************************************************/
/*                        Pricing                           */
/************************************************************/

.button-red {
    background-color: #ad3535;
    color: #e8e8e8;
}

.button-green {
    background-color: #58ad35;
    color: #e8e8e8;
}

.button-yellow {
    background-color: #c4b82e;
    color: #e8e8e8;
}


.button.green {
    background: #98C741;
    color: #fff;
}

.button.teal {
    background: #62AEB9;
    color: #fff;
}

.button.orange {
    background: #ED652E;
    color: #fff;
}

.button.darker-gray {
    background: #777;
    color: #FFF;
}

.button.green-outlined {
    border: 2px solid #98C741;
    background: #FFF;
    color: #58585B;
}

.button.teal-outlined {
    border: 2px solid #62AEB9;
    background: #FFF;
    color: #58585B;
}

.button.orange-outlined {
    border: 2px solid #ED652E;
    background: #FFF;
    color: #58585B;
}

.button.darker-gray-outlined {
    border: 2px solid #777;
    background: #FFF;
    color: #58585B;
}

.band {
    padding: 30px 0;
}

    .band.black-bg, .band.mid-orange-bg, .band.orange-bg {
        color: #FFF;
    }

        .band.black-bg h1, .band.black-bg h2, .band.black-bg h3, .band.black-bg h4, .band.black-bg h5, .band.black-bg h6, .band.mid-orange-bg h1, .band.mid-orange-bg h2, .band.mid-orange-bg h3, .band.mid-orange-bg h4, .band.mid-orange-bg h5, .band.mid-orange-bg h6, .band.orange-bg h1, .band.orange-bg h2, .band.orange-bg h3, .band.orange-bg h4, .band.orange-bg h5, .band.orange-bg h6 {
            color: #FFF;
        }


.signup-b .pricing-plans, .signup-b .discount-message-group {
    *zoom: 1;
}

    .signup-b .pricing-plans:before, .signup-b .pricing-plans:after, .signup-b .discount-message-group:before, .signup-b .discount-message-group:after {
        content: " ";
        display: table;
    }

    .signup-b .pricing-plans:after, .signup-b .discount-message-group:after {
        clear: both;
    }

.signup-b .pricing-plans-col-header {
    text-align: center;
    background-color: #777;
    color: #FFF;
    margin-top: 0;
    font-size: 18px;
    line-height: 1em;
    padding: 10px 0 14px;
}

.signup-b .pricing-plans-group-header {
    display: block;
    border: 1px solid #CCC;
    border-bottom: none;
}

.signup-b .pricing-plans-group-title {
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    background-color: #FFF;
    margin: 0 25% 10px;
    position: relative;
    top: -10px;
}

.signup-b .pricing-plans-group {
    *zoom: 1;
    margin: 0 10px 20px;
}

    .signup-b .pricing-plans-group:before, .signup-b .pricing-plans-group:after {
        content: " ";
        display: table;
    }

    .signup-b .pricing-plans-group:after {
        clear: both;
    }

.signup-b .pricing-plans-group, .signup-b .discount-message {
    float: left;
    width: 49%;
    margin: 0 2% 0 0;
}

    .signup-b .pricing-plans-group.last-child, .signup-b .discount-message.last-child {
        margin-right: 0;
    }

.signup-b .discount-message {
    text-align: left;
    padding: 15px 20px;
    margin-bottom: 30px;
    background-color: #eff9fb;
    border-radius: 3px;
}

    .signup-b .discount-message h4 {
        margin-bottom: 0;
    }

.signup-b .pricing-plans-col {
    border: 4px solid #777;
    position: relative;
    text-align: center;
    background-color: #F6F6F6;
    border-radius: 3px;
    float: left;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 0;
    min-height: 650px;
}

    .signup-b .pricing-plans-col.last-child {
        margin-right: 0;
    }

    .signup-b .pricing-plans-col .popular-banner {
        display: block;
        position: absolute;
        top: -10px;
        right: -10px;
        z-index: 100;
        background-image: url(../img/signup/popular-banner.png);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        height: 67px;
        width: 67px;
    }

    .signup-b .pricing-plans-col .button-stack {
        margin: 18px 0;
    }

    .signup-b .pricing-plans-col .button {
        font-size: 14px;
        min-width: 140px;
        margin-bottom: 12px;
    }

.signup-b .price {
    font-size: 3em;
    margin: -20px auto;
}

    .signup-b .price sup {
        font-size: 24px;
        font-weight: normal;
        vertical-align: middle;
    }

    .signup-b .price .price-amount {
        font-weight: bold;
    }

    .signup-b .price .term {
        font-size: 18px;
    }

.signup-b .price-before-discount {
    text-decoration: line-through;
    color: #FF0000;
    font-size: 16px;
    margin: 0;
}

    .signup-b .price-before-discount .inner-text {
        color: #8b8b8e;
    }

.signup-b .pricing-plan-bullets {
    text-align: left;
    margin: 0 10px 20px;
    font-size: 15px;
    padding-left: 1.3em;
    text-indent: -0.6em;
}

    .signup-b .pricing-plan-bullets i {
        color: #999;
    }

    .signup-b .pricing-plan-bullets li {
        margin-bottom: 15px;
        line-height: 1.4em;
    }

.signup-b .monthly-plus {
    border-color: #98C741;
}

    .signup-b .monthly-plus .pricing-plans-col-header {
        background-color: #98C741;
    }

.signup-b .annual-standard {
    border-color: #62AEB9;
}

    .signup-b .annual-standard .pricing-plans-col-header {
        background-color: #62AEB9;
    }

.signup-b .annual-plus {
    border-color: #ED652E;
}

    .signup-b .annual-plus .pricing-plans-col-header {
        background-color: #ED652E;
    }

@media only screen and (max-width: 768px) {
    .signup-b .pricing-plans-group-header, .signup-b .discount-message {
        display: none;
    }

    .signup-b .pricing-plans-group {
        margin: 0;
        padding: 0 15px;
        float: none;
        width: 100%;
    }

    .signup-b .pricing-plans-col {
        margin-bottom: 20px;
        float: none;
        width: 100%;
        margin: 0 0 20px;
        min-height: 0;
    }
}

.freeTrial-img {
    width: 100%;
}

/*********************************************************************************/
/* Table                                                                         */
/*********************************************************************************/

#example_table {
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    font-size: 12px;
    margin: 20px;
    text-align: left;
    width: 100%;
}

    #example_table th {
        color: #339;
        font-size: 15px;
        font-weight: normal;
        padding: 12px;
    }

    #example_table td {
        background-color: #dcdcdc;
        border-top: 1px solid #fff;
        color: #000;
        padding: 9px 12px;
    }

    #example_table tr.odd td {
        cursor: pointer;
    }

    #example_table tr:not(.odd) td {
        background-color: #efefef;
    }

#example_table2 {
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    font-size: 12px;
    margin: 20px;
    text-align: left;
    width: 100%;
}

    #example_table2 th {
        color: #339;
        font-size: 15px;
        font-weight: normal;
        padding: 12px;
    }

    #example_table2 td {
        background-color: #dcdcdc;
        border-top: 1px solid #fff;
        color: #000;
        padding: 9px 12px;
    }

    #example_table2 tr.odd td {
        cursor: pointer;
    }

    #example_table2 tr:not(.odd) td {
        background-color: #efefef;
    }


table#responsiveTable {
    margin: 0 auto;
    border-collapse: collapse;
    font-weight: 100;
    background: #555;
    color: #fff;
    text-rendering: optimizeLegibility;
    border-radius: 5px;
}

    table#responsiveTable caption {
        font-size: 2rem;
        color: #444;
        margin: 1rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center left, center right;
    }

    table#responsiveTable thead th {
        font-weight: 600;
    }

    table#responsiveTable thead th, table#responsiveTable ttd {
        padding: .8rem;
        font-size: 1.4rem;
        /*text-align: center;*/
    }

    table#responsiveTable tbody td {
        padding: .8rem;
        font-size: 1.4rem;
        color: #444;
        background: #eee;
    }

    table#responsiveTable tbody tr:not(:last-child) {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

@media screen and (max-width: 750px) {
    table#responsiveTable caption {
        background-image: none;
    }

    table#responsiveTable thead {
        display: none;
    }

    table#responsiveTable tbody td {
        display: block;
        padding: .6rem;
    }

    table#responsiveTable tbody tr td:first-child {
        background: #555;
        color: #fff;
    }

    table#responsiveTable tbody td:before {
        content: attr(data-th);
        font-weight: bold;
        display: inline-block;
        text-align: center;
    }
}

/************************************************************/
/*                         Media Qs                         */
/************************************************************/

body p::selection, body .p::selection {
    color: #0594FF;
}

body li::selection, body .li::selection {
    color: #0594FF;
}

body span::selection, body .span::selection {
    color: #0594FF;
}

body h1::selection, body .h1::selection {
    color: #037edb;
}

body h2::selection, body .h2::selection {
    color: #037edb;
}

body h3::selection, body .h3::selection {
    color: #037edb;
}

body h4::selection, body .h4::selection {
    color: #037edb;
}

body h5::selection, body .h5::selection {
    color: #037edb;
}

body h6::selection, body .h6::selection {
    color: #037edb;
}

body h1::selection, body .h1::selection {
    color: #0594FF;
}

body h2::selection, body .h2::selection {
    color: #0594FF;
}

body h3::selection, body .h3::selection {
    color: #0594FF;
}

body h4::selection, body .h4::selection {
    color: #0594FF;
}

body h5::selection, body .h5::selection {
    color: #0594FF;
}

body h6::selection, body .h6::selection {
    color: #0594FF;
}

body a:not(.btn)::selection {
    color: #0594FF;
}

body .btn-link::selection {
    color: #0594FF;
}

body a:not(.btn)::selection {
    color: #0594FF;
}

body .btn-link::selection {
    color: #0594FF;
}

h1::selection {
    background: #fff;
}

h1::-moz-selection {
    background: #fff;
}

h2::selection {
    background: #fff;
}

h2::-moz-selection {
    background: #fff;
}

h3::selection {
    background: #fff;
}

h3::-moz-selection {
    background: #fff;
}

h4::selection {
    background: #fff;
}

h4::-moz-selection {
    background: #fff;
}

h5::selection {
    background: #fff;
}

h5::-moz-selection {
    background: #fff;
}

p::selection {
    background: #fff;
}

p::-moz-selection {
    background: #fff;
}


/************************************************************/
/*                         Media Qs                         */
/************************************************************/

@media only screen and (max-width: 1220px) {
    .bar {
        width: 100%;
        height: 530px;
        background: -moz-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -webkit-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -ms-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: linear-gradient(161deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        opacity: 0.3;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 317px !important;
        -ms-transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-animation: roll-out 1.2s ease-out;
        -moz-animation: roll-out 1.2s ease-out;
        animation: roll-out 1.2s ease-out;
    }

    .bronze {
        width: 250px;
    }

    .silver {
        width: 250px;
    }

    .gold {
        width: 250px;
    }

    .platinum {
        width: 250px;
    }
}

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



    .heroTextArea p {
        font-size: 15px;
    }

    .heroTextArea h1 {
        font-size: 28px;
    }

    .bronze {
        width: 200px;
    }

    .silver {
        width: 200px;
    }

    .gold {
        width: 200px;
    }

    .platinum {
        width: 200px;
    }
}

@media only screen and (max-width: 960px) {
    .heroImageTwo {
        display: none;
    }


    header ul li a {
        font-size: 2rem;
        text-decoration: none;
    }

    .text-box {
        color: #fff;
        font-size: 1.5rem !important;
        font-weight: 600;
    }
}

@media only screen and (max-width: 850px) {
    .bar {
        width: 100%;
        height: 530px;
        background: -moz-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -webkit-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -ms-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: linear-gradient(161deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        opacity: 0.3;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 316px !important;
        -ms-transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-animation: roll-out 1.2s ease-out;
        -moz-animation: roll-out 1.2s ease-out;
        animation: roll-out 1.2s ease-out;
    }

    header ul li a {
        font-size: 1.6rem;
        text-decoration: none;
    }

    .topContact a {
        font-size: 13px;
        text-decoration: none;
    }

    .topContact span {
        font-size: 13px;
        text-decoration: none;
    }


    .heroImageTwo {
        display: none;
    }
}

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

    #myTab {
        margin-left: -160px;
    }

    .bronze {
        width: 280px;
    }

    .silver {
        width: 280px;
    }

    .gold {
        width: 280px;
    }

    .platinum {
        width: 280px;
    }

    .topContact a {
        font-size: 12px;
        text-decoration: none;
    }

    .topContact span {
        font-size: 11px;
        text-decoration: none;
    }

    .logo1 {
        height: 120px;
        width: 306px;
        margin-top: 1px;
    }

    .courseButtons img {
        width: 70px;
        height: 70px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .heroImage {
        background: url(../../images/bgImage.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
        min-width: 100%;
        min-height: 100%;
    }


    .heroImageTwo {
        background: url(../../img/img-2.png) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 580px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
        min-width: 100%;
        min-height: 100%;
    }

        .heroImageTwo .partner {
            padding-bottom: 100px;
        }

    .heroImageOffice365 {
        background: url(../../images/bgOffice365.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImagePackage {
        background: url(../../images/bgPackage.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageMOS {
        background: url(../../images/bgMOS.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }


    .heroImageWindows10 {
        background: url(../../images/bgImageWindow10.jpg) no-repeat center center fixed;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }


    .heroImageMTA {
        background: url(../../images/bgMTA.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageClassroom {
        background: url(../../images/bgClassroom.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageMCSA {
        background: url(../../images/bgMCSA.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageMOC {
        background: url(../../images/bg-moc-on-demand.png) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageDesktop {
        background: url(../../images/bgDesktop.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageSQL {
        background: url(../../images/bgSQL.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageServer {
        background: url(../../images/bgServer.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageProgramming {
        background: url(../../images/bgProgramming.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageMCSE {
        background: url(../../images/bgMCSE.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageContact {
        background: url(../../images/bgContactus.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageContact1 {
        background: url(../../images/bgContact.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageAbout {
        background: url(../../images/bgAbout.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageDemo {
        background: url(../../images/bgDemo.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 400px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageSorry {
        background: url(../../images/bgSorry.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageCancel {
        background: url(../../images/bgCancelled.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImage404 {
        background: url(../../images/bg404.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageThankyou {
        background: url(../../images/bgThankyou.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroImageCorp {
        background: url(../../images/bgCorp.jpg) no-repeat center center;
        background-attachment: unset !important;
        background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height: 530px;
        width: 100%;
        color: white;
        padding: 110px;
        z-index: -1;
    }

    .heroTextArea {
        margin-top: -80px !important;
    }

        .heroTextArea p {
            font-size: 14px;
        }

        .heroTextArea h1 {
            font-size: 26px;
        }

    .downArrow {
        width: 20%;
    }

    .backArrow {
        width: 20%;
    }

    .logos h3 {
        font-size: 20px;
    }

    .logos span img {
        width: 138px;
        height: 79px;
    }

    .logos span a .comptia {
        height: 70px;
        width: 170px;
    }

    .logo, .right {
        text-align: center;
    }

    .exam346 {
        width: 100%;
        height: 100%;
    }

    .bar {
        width: 100%;
        height: 530px;
        background: -moz-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -webkit-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -ms-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: linear-gradient(161deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        opacity: 0.3;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 446px !important;
        -ms-transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-animation: roll-out 1.2s ease-out;
        -moz-animation: roll-out 1.2s ease-out;
        animation: roll-out 1.2s ease-out;
    }
}

@media only screen and (max-width: 640px) {
    .bronzeHeader {
        width: 325px;
    }

    .silverHeader {
        width: 325px;
    }

    .goldHeader {
        width: 380px;
    }

    .platinumHeader {
        width: 380px;
    }
}

@media only screen and (max-width: 600px) {
    .bar {
        width: 100%;
        height: 530px;
        background: -moz-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -webkit-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -ms-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: linear-gradient(161deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        opacity: 0.3;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 423px !important;
        -ms-transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-animation: roll-out 1.2s ease-out;
        -moz-animation: roll-out 1.2s ease-out;
        animation: roll-out 1.2s ease-out;
    }

    .lab-box {
        border: 1px solid #888;
        height: 650px !important;
        background-image: url('../../img/img-2.png');
        width: auto;
        margin: 10px;
        background-color: #fff;
    }
}

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

    .bar {
        width: 100%;
        height: 530px;
        background: -moz-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -webkit-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -ms-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: linear-gradient(161deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        opacity: 0.3;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 485px !important;
        -ms-transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-animation: roll-out 1.2s ease-out;
        -moz-animation: roll-out 1.2s ease-out;
        animation: roll-out 1.2s ease-out;
    }

    .heroTextArea p {
        font-size: 1.1em;
    }

    .heroTextArea h1 {
        font-size: 2em;
    }

    .downArrow {
        width: 18%;
        margin-top: -8px;
    }

    .backArrow {
        width: 20%;
        margin-top: -10px;
    }

    .bgAll .container {
        margin: 5% -20%;
    }

    .courseButtons img {
        width: 70px;
        height: 70px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .logo1 {
        height: auto;
        width: 90%;
        margin-top: 1px;
    }

    .none {
        display: none;
    }
}

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

    #myTab {
        margin-left: 20px;
        padding: 20px 20%;
    }

    .heroTextArea h1 {
        font-size: 20px;
    }

    .downArrow {
        width: 22%;
        margin-top: -10px;
    }

    .backArrow {
        width: 30%;
        margin-top: -15px;
    }

    .middleArea #office365 {
        width: 80%;
        margin-left: 30px;
    }

    .middleArea #office365 {
        width: 80%;
        margin-left: 30px;
    }

    .middleArea #mosoffice365 {
        width: 80%;
        margin-left: 30px;
    }

    .middleArea #mosoffice365 {
        width: 80%;
        margin-left: 30px;
    }
}


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


    .bar {
        width: 100%;
        height: 530px;
        background: -moz-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -webkit-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -ms-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: linear-gradient(161deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        opacity: 0.3;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 543px !important;
        -ms-transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-animation: roll-out 1.2s ease-out;
        -moz-animation: roll-out 1.2s ease-out;
        animation: roll-out 1.2s ease-out;
    }

    .banner1 span {
        font-size: 0.6em;
    }

    .aboutRight {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        border-radius: 150px;
        background-size: contain;
        background-image: url('../../images/front-office.jpg');
        background-repeat: no-repeat;
        background-position: 100%;
    }

    .aboutLeft {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        border-radius: 150px;
        background-size: contain;
        background-image: url('../../images/what-we-do.jpg');
        background-repeat: no-repeat;
        background-position: 100%;
    }

    .thankyouRight {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        border-radius: 150px;
        background-size: contain;
        background-image: url('../../images/what-we-do.jpg');
        background-repeat: no-repeat;
        background-position: 100%;
    }

    .sorryRight {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        border: 1px solid black;
        border-radius: 150px;
        background-size: contain;
        background-image: url('../../images/what-we-do.jpg');
        background-repeat: no-repeat;
        background-position: 100%;
    }

    .table {
        display: none;
    }

    .hide {
        display: none;
    }

    #middle div img {
        width: 250px !important;
    }

    .bgAll .container {
        margin: 5% -45%;
    }

    .heroTextArea h1 {
        font-size: 20px;
    }

    .downArrow {
        width: 20%;
    }

    .backArrow {
        width: 20%;
    }

    .bronzeHeader {
        width: 315px;
    }

    .silverHeader {
        width: 315px;
    }

    .goldHeader {
        width: 315px;
    }

    .platinumHeader {
        width: 315px;
    }
}

@media only screen and (max-width: 350px) {
    .bgAll .container {
        margin: 5% -85%;
    }

    .aboutRight {
        margin: 0 auto;
        width: 150px;
        height: 150px;
        border: 1px solid black;
        border-radius: 150px;
        background-size: contain;
        background-image: url('../../images/front-office.jpg');
        background-repeat: no-repeat;
        background-position: 100%;
    }

    .aboutLeft {
        margin: 0 auto;
        width: 150px;
        height: 150px;
        border: 1px solid black;
        border-radius: 150px;
        background-size: contain;
        background-image: url('../../images/what-we-do.jpg');
        background-repeat: no-repeat;
        background-position: 100%;
    }

    .thankyouRight {
        margin: 0 auto;
        width: 150px;
        height: 150px;
        border: 1px solid black;
        border-radius: 150px;
        background-size: contain;
        background-image: url('../../images/what-we-do.jpg');
        background-repeat: no-repeat;
        background-position: 100%;
    }

    .sorryRight {
        margin: 0 auto;
        width: 150px;
        height: 150px;
        border: 1px solid black;
        border-radius: 150px;
        background-size: contain;
        background-image: url('../../images/what-we-do.jpg');
        background-repeat: no-repeat;
        background-position: 100%;
    }

    .modalDialog > div {
        width: 250px !important;
    }

    #middle div img {
        width: 200px !important;
    }


    .bar {
        width: 100%;
        height: 530px;
        background: -moz-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -webkit-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: -ms-linear-gradient(289deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        background: linear-gradient(161deg, rgba(0, 146, 255, 0.5) 0%, rgba(74, 99, 216, 0.5) 36%, rgba(237, 59, 111, 0.5) 100%);
        opacity: 0.3;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 595px !important;
        -ms-transform-origin: 100% 0%;
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        -webkit-animation: roll-out 1.2s ease-out;
        -moz-animation: roll-out 1.2s ease-out;
        animation: roll-out 1.2s ease-out;
    }
}



@media only screen and (max-width: 300px) {
    .bgAll .container {
        margin: 5% -95%;
    }

    #middle div img {
        width: 170px !important;
    }
}

@media only screen and (max-width: 285px) {
    .bgAll .container {
        margin: 5% -150%;
    }
}