/* Tools */
.relative { position:relative; }
.v-center { position:absolute;  top: 60%; transform:translateY(-50%); left:0; right:0; }
.img-centered { text-align:center; margin:0 auto; }
.highlight { color:#5594ad; }
.uppercase { text-transform:uppercase }
.no-margin { margin:0!important; }
.no-padding { padding:0!important;}
/* End */

/* Body */

/* Stops IOS from overridding the colour for links when displayed on a IOS device */
.appleLinksWhite a {
    color: #ffffff !important;
    text-decoration: none;
}

.sub-heading a {
    color: #ffffff !important;
    text-decoration: none;
}


* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
}

h1, h2, h3, h4, p, a, input {
    font-family: 'Open Sans', sans-serif;
    color:#00171f;
}

h1, h2, h3, h4 {
    font-weight:300;
    margin-bottom:15px;
}

p { font-weight:300; }

button,
button:focus {
    outline:0;
}

th {
	width: 25%;
}

.material-icons.md-30 { font-size: 30px; }
.material-icons.green500 { color: #8BC34A; }
.material-icons.neutral { color: #9E9E9E; }


/* End of body */

/* Re-usables */
.IDD {
    padding-left: 15%;
    padding-right: 15%;
    margin-bottom: 50px;
    text-align: center;
}

a {
    cursor:pointer;
}
.modal-button {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}
a:hover { text-decoration:initial; }
.btn-primary {
    background:#ef7f29;
    color:#fff;
    padding:10px 15px;
    border-radius:0;
    border-color:transparent;
}
.btn-secondary {
    background:#5594ad;
    color:#fff;
    padding:10px 15px;
    border-radius:0;
    border-color:transparent;
    text-transform:uppercase;
}
.btn-secondary:hover {
    background:#487e93;
    color:#fff;
}
.btn-primary:hover {
    background:#f19a37;
    border-color:transparent;
    color:#fff;
}
.login-btn-ghost {
    background: #ef7f29;
    margin: 0px 0px;
}

.login-btn-ghost:hover {
    background: #f68c3a !important;
    color: #fff !important;
}

.link-primary:hover a {
    color:#fff!important;
}
.btn-ghost {
    border:2px solid #ef7f29;
    color:#fff;
    border-radius:0;
    text-transform:uppercase
}
.btn-ghost:hover {
    background:#ef7f29;
}
.link-ghost { border:2px solid #ef7f29; color:#fff; padding:0px 15px; text-transform:uppercase; }
.navbar-nav .link-ghost a { font-weight:bold; color:#ffffff; }
.link-ghost:hover { background:#ef7f29; }
.navbar-nav .link-ghost:hover a { color:#fff; }
.navbar-nav .link-primary { 
    background:#ef7f29; 
    margin:0px 15px; 
    color:#fff; 
    padding:2px 15px; 
}

.navbar-nav .link-primary:hover { 
    background:#f68c3a; 
    /* margin:0px 15px; */
    color:#fff; 
    padding:2px 15px; 
}

.navbar-nav .link-primary a { 
    color:#fff; 
}

.btn-primary, .btn-ghost, .link-ghost, .link-primary, .btn-secondary, .export-cta {
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    cursor:pointer;
}

.content-promo {
    width: 1140px;
}

.center-promo {
    padding-left: 15%;
    padding-right: 15%;
    margin-bottom: 70px;
    text-align: center;
}

.promo-info {
    padding: 80px 0px; 
    margin-top: 30px; 
    margin-bottom: 70px; 
    position: relative; 
    background-color: rgb(96, 125, 139);
}

.promo-info h3 {
    text-align: center; 
    color: rgb(255, 255, 255); 
    line-height: 45px;
}

.promo-info::after {
    content: '';
    position: absolute;
    bottom: -29px;
    right: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background: url(triangle.png) no-repeat;
    background-position: center top;
    z-index: 1;
}


.feature-promo {
    height: 150px;
    padding: 20px;
    padding-top: 30px; 
    text-align: center; 
    background-color: rgb(96, 125, 139);
}

.feature-promo h4 {
    color: rgb(255, 255, 255);
    padding-bottom: 5px;
}

.content-center {
    margin: auto;
}

.icon-text {
    display: inline-block;
    vertical-align: 13px;
}

.mobile-icon-support {
    animation: opacityPulse 2s ease-out;
    animation-iteration-count: infinite; 
    opacity: 1;
}

@-webkit-keyframes opacityPulse {
    0% {opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {opacity: 0.0;}
}

.icon-arrow {
    display: none;
}

/* End of re-usables */

/* Icon */

.circle {

    width: 50px;
    height: 50px;
    background: #ddeaef;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    margin: auto;
    padding-top: 8px;
}

/* End of Icon */

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

#features h2 {
    margin-top:115px;
    margin-bottom:0px;
}

.feature-text-container {
 text-align: justify;
 -moz-text-align-last: left;
 text-align-last: left;
 padding-left: 10px;
 padding-right: 10px;
}

#feature-row, #faq-row, #cta-row, #pricing-row, #price-row, #trial-row, #product-breakdown,
#overview-row { padding:75px 0 75px; }

#feature-row { padding-top:60px; }

#cta-row p,
#cta-row h2,
#cta-row a {
    color:#fff;
}

#cta-row p {
    margin-bottom:30px;
}

hr.divider {
    border: none;
    margin: 30px 0;
}

.feature-panel {
    padding-top: 25px;
    padding-bottom: 25px;
}

.feature-panel img.main {
    margin-bottom:30px;
}

.feature-panel h4 {
    margin-bottom:15px;
}

.info-panel img.main {
    margin-bottom:30px;
}

.info-panel h4 {
    margin-bottom:15px;
    text-align: center;
    font-size: 22px;
    line-height: 30px;
}

.panel-image-container {
 /* height: 60px;*/
}

.icon-image-container {
    height: 80px;
    text-align: center;
}

.learn-more {
    font-size:16px;
    font-weight:600;
    color:#0f5da6;
}

.learn-more img {
    width:6px;
    margin-left:15px;
}

#overview-row .cpd-overview,
#overview-row .cpd-activities,
#overview-row .cpd-status {
    margin-bottom: 75px;
}

#overview-row a {
    color:#ef7f29;
}

.above-footer {
    /*    background:url('bottom-image.jpg') no-repeat;*/
    background-color: #34373C;
    background-size:cover;
    background-position:center;
}

.above-footer .btn {
    width:200px;
}

.cpd-point img {
    padding:30px 0 15px;
}

/* Icon 1 */

#nav-icon4 {
    width: 30px;
    height: 18px;
    position: relative;
    margin: 12px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon4 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #ffffff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

/* Icon 4 */


#nav-icon4 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
    top: 8px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
    top: 16px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -5px;
    left: 8px;
}

#nav-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 8px;
}

.faded-strip {
    /*    background-color:rgba(255,255,255,0.6);*/
    background-color:#34373C;
    position:relative;
    z-index:99999;
}

.navbar-inverse .navbar-toggler {
    border:0px solid transparent;
}

.navbar-toggleable-md { padding-top:15px; padding-bottom:15px; }

button.navbar-toggler {
    padding:0;
}

.navbar-light .navbar-nav .nav-link,
.navbar-nav .nav-link {
    color:#ffffff;
    text-transform:uppercase;
    font-size:14px;
    font-weight:bold;
    letter-spacing:1px;
}

.navbar-collapse {
    width: 100%;
    text-align: center;
    z-index: 99998;
    position: relative;
}

.modal-open .modal {
    z-index: 99999;
}

.nav-item {
    margin:0 10px;
}

.nav-item-selected {
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-width: 3px;
    border-bottom-style: solid;
}

footer {
    padding:30px 0;
    background:#111111;
}

footer p {
    color:#fff;
    font-size:14px;
    text-align: center;
}
/* End nav */

.containing-image {
    background:url('main-image.png') no-repeat;
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    height:839px;
    background-color: #B3B0C3;
}


/*
.containing-image {
    background:url('main-image.jpg') no-repeat;
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
    }*/

    .mainheader {
        color:#333333;
        font-weight: lighter;
        font-size: 36px;
        line-height: 44px;
    }


    .mainsubhead {
        color:#333333;
        font-weight: lighter;
        font-size: 24px;
        line-height: 30px;
    }


    .containing-image h1 {
        color:#333333;
        padding-bottom:15px;
        text-align: left;
        max-width: 650px;
    }

    .containing-image .sub-heading {
        font-size:18px;
        color:#333333;
        padding-bottom:75px;
        text-align: left;
        max-width: 650px;
    }

    .pricing.containing-image {
        background:url('pricing-image.jpg') no-repeat;
        min-height: 400px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height:410px;
    }

    #price-row .panel {
        max-height:100%;
        padding:15px 0 5px;
    }

    .trial.containing-image {
        background:url('trial-image.jpg') no-repeat;
        min-height: 400px;
        /*background-attachment: fixed;*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height:410px;
    }

    .trial.containing-image .sub-heading,
    .pricing.containing-image .sub-heading {
        padding-bottom:0;
    }

    .trial-text {
        height:183px;
    }

    .scroll-to {
        position:absolute;
        bottom:10%;
        left:0;
        right:0;
    }

    .down-arrow {
        background:url('down-arrow_bk.png') no-repeat;
        width:53px;
        height:53px;
        margin:0 auto;
    }

    .grey-strip {
        background:#d2d2d2;
    }

    /* Modal */
    .form-control {
        border-radius:0;
    }

    label .required {
        color:red;
    }

    .required {
        color:red;
    }
    .modal-content {
        border-radius:0;
        padding:20px 30px 30px 30px;
    }

    .modal-content p a {
        color:#5594ad;
        text-decoration:underline;
    }

    .modal-content .btn-secondary {
        margin:0 15px;
    }

    .modal-content p,
    .modal-content label {
        font-size:14px;
    }

    .close {
        color:#ff0000;
        float:right;
    }

    .modal-header,
    .modal-footer{
        border:0px solid transparent;
    }

    .modal-header {
        padding-bottom:0;
    }

    .vertical-alignment-helper {
        display:table;
        height: 100%;
        width:100%;
        max-width:530px;
        margin:0 auto;
        pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
    }
    .vertical-align-center {
        /* To center vertically */
        display: table-cell;
        vertical-align: middle;
        pointer-events:none;
    }
    .modal-content {
        /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
        width:inherit;
        height:inherit;
        /* To center horizontally */
        margin: 0 auto;
        pointer-events: all;
    }

    /* End of modal */

    /* Pricing */


    .panel {
        background:#fff;
        padding:15px 0;
    }

    .feature-list {
        list-style-type:none;
    }

    .feature-list li  {
        font-weight:600;
        font-size:14px;
        margin-bottom:10px;
    }

    .panel a {
        color:#5594ad;
        font-size:14px;
    }

    .table td, .table th {
        vertical-align: middle;
    }

    .table thead th {
        font-weight: 600;
        font-size: 16px;
        padding: 20px;
        border: 0px solid transparent;
        text-align: left;
    }

    .table tbody td {
        font-weight:400;
        font-size:14px;
    }

    .table tbody tr:nth-child(odd) {
        background: #F5F5F5;
    }

    td.img-centered {
        width: 260px;
    }

    .col-des {
        font-weight: 300;
        font-size: 14px; 
    }

    #product-breakdown h3 {
        margin-bottom:45px;
    }

    #product-breakdown h4 {
        margin-bottom:30px;
    }

    .text-row {
        padding-top:30px;
    }

    .bottom-image {
        background:url('bottom-image.jpg') no-repeat;
        background-position:center;
        background-size:cover;
        padding:90px 0;
    }

    .bottom-image img {
        width:6px;
        margin-left:5px;
    }

    .bottom-image p,
    .bottom-image h4,
    .bottom-image a {
        color:#fff;
    }

    /* End of pricing */

    /* Learn feature page */
    .learn {
        background:#1b3037;
    }

    .learn h1 { color:#fff; font-size:30px; }

    .learn .sub-heading { 
        color:#fff; 
        font-size:18px; 
        line-height:30px;
        padding-top: 60px; 
    }
    .learn .feature-tabs a {
        color:#46a4bf;
    }

    .learn .nav-tabs {
        border: 0px solid transparent;
        display: initial;
        width: initial;
        margin: 30px 0 60px;
    }

    .learn .tab-pane h1 {
        margin:20px 0 15px;
    }

/*.learn .tab-text {
    padding:0px 48px;
    }*/

    .learn .tab-text {
        padding: 0px 248px;
        text-align: center;
        padding-bottom: 50px;
    }

    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover,
    .nav-tabs .nav-link {
        border:0px solid transparent;
    }

    a.nav-link:hover {
        color:#EF7F29;
        -o-transition:.5s;
        -ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }

    .navbar-brand {
        width:260px;
    }

    .nav-tabs .nav-item {
        display: inline-block;
    }

    .learn .nav-tabs a.active {
        background:transparent;
        color:#fff;
        border:0px solid transparent;
    }

    .learn .nav-tabs a img {
        visibility:hidden;
        float: left;
        margin-top: 7px;
        position: relative;
        left: -5px;
        width: 6px;
    }

    .learn .nav-tabs a.active img {
        visibility:visible;
    }

    .nav-tabs-container {
    /*margin: 45px auto 45px;
    text-align: center;*/
    margin: auto;
    width: 680px;
    margin-top: 45px;
    margin-bottom: 45px;
}

.learn .feature-image {
    text-align: center;
}

.learn .feature-image-mobile {
    display: none;
}

.tabs-container {
 /* height:630px;*/
}

.export-cta-position {
    padding-top: 10px;
}

.export-cta-padding {
    position: absolute;
    left: 50%;
    margin-left: -65px;
}

.export-cta {
 /* float: right;*/
 color: #ffffff;
 padding-top: 0px;
 background: #46a4bf;
 padding: 5px 10px;
 background-image: url('/go/assess/about/files/pdf-icon.png');
 background-repeat: no-repeat;
 background-position-x: 109px;
 background-position-y: 7px;
 width: 131px;
 text-align: left;
}

.export-cta span {
    font-size: 14px;
}

.export-cta a {
    color: #ffffff;
}

.export-cta:visited {
    color: #ffffff;
}


.export-cta:hover {
    background: #53bedd;
    background-image: url('/go/assess/about/files/pdf-icon.png');
    background-repeat: no-repeat;
    background-position-x: 109px;
    background-position-y: 7px;
    width: 131px;
    text-align: left;
}

/* End of learn feature page */

.animation-element {
    opacity: 0;
    position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
    opacity: 0;
    -moz-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
    -moz-transform: translate3d(-100px, 0px, 0px);
    -webkit-transform: translate3d(-100px, 0px, 0px);
    -o-transform: translate(-100px, 0px);
    -ms-transform: translate(-100px, 0px);
    transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
    float: left;
    width: 47%;
    margin: 0% 1.5% 3% 1.5%;
    background: #F5F5F5;
    padding: 15px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.animation-element.slide-left.testimonial:nth-of-type(odd) {
    width: 48.5%;
    margin: 0% 1.5% 3.0% 0%;
}

.animation-element.slide-left.testimonial:nth-of-type(even) {
    width: 48.5%;
    margin: 0% 0% 3.0% 1.5%;
}

.animation-element.slide-left.testimonial .header{
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
    float: left;
    margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
    float: left;
}

.animation-element.slide-left.testimonial img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}

.animation-element.slide-left.testimonial h3 {
    margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial h4 {
    margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial .content {
    float: left;
    width:100%;
    margin-bottom: 10px;
}

.animation-element.slide-left.testimonial .rating{}

.animation-element.slide-left.testimonial i {
    color: #aaa;
    margin-right: 5px;
}

.fade-in {
    opacity:0;
}



/*media queries for small devices*/
@media screen and (max-width: 678px){
    /*testimonials*/
    .animation-element.slide-left.testimonial,
    .animation-element.slide-left.testimonial:nth-of-type(odd),
    .animation-element.slide-left.testimonial:nth-of-type(even){
        width: 100%;
        margin: 0px 0px 20px 0px;
    }
    .animation-element.slide-left.testimonial .right,
    .animation-element.slide-left.testimonial .left,
    .animation-element.slide-left.testimonial .content,
    .animation-element.slide-left.testimonial .rating{
        text-align: center;
        float: none;
    }
    .animation-element.slide-left.testimonial img{
        width: 85px;
        height: 85px;
        margin-bottom: 5px;
    }

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    h2 { margin-top:30px; }
    #feature-row, #faq-row, #cta-row, #pricing-row, #trial-row, #price-row, #product-breakdown,
    #overview-row { padding:60px 0; }
    .image-container {
        height:250px;
    }
    .faded-strip {
        /*        background:rgba(255,255,255,0.9);*/
        background-color:#34373C;
    }
    .navbar-collapse .nav-item {
        margin-bottom:15px;
    }
    .cii {
        margin-bottom:15px;
    }
    .biba {
        margin-top:15px;
    }
    body, p, a {
        font-size:14px;
    }
    .navbar-brand {
        width:165px;
    }
}

/*bounce up animation for the subject*/

.bounce-up {
    opacity: 0;
    -moz-transition: all 700ms ease-out;
    -webkit-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
    -moz-transform: translate3d(0px, 200px, 0px);
    -webkit-transform: translate3d(0px, 200px, 0px);
    -o-transform: translate(0px, 200px);
    -ms-transform: translate(0px, 200px);
    transform: translate3d(0px, 200, 0px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bounce-up.in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}

.subject {
    float: left;
    width: 100%;
    margin: 0% 1.33% 2.66% 1.33%;
    background: #F5F5F5;
    padding: 15px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    border: solid 1px #EAEAEA;
}

.subject:hover,
.subject:active {
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
}

.subject .header {
    margin: 8px 0px;
}

.subject .header .date,
.subject .header .category {
    margin: 0px;
    clear: none;
    width: 50%;
}

.subject .header .date i,
.subject .header .category i {
    margin-right: 5px;
    color: #333;
    -moz-transition: all 400ms linear;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.subject .header .date {
    float: left;
    text-align: left;
}

.subject .header .category {
    float: right;
    text-align: right;
}
/*subject icon at top*/

.subject .icon {
    position: absolute;
    top: -20px;
    left: 50%;
    left: calc(50% - 20px);
}

.subject .icon i {
    width: 40px;
    height: 40px;
    color: rgb(255, 255, 255);
    font-size: 150%;
    border-radius: 50%;
    text-align: center;
    padding: 7px;
}
/*Category color / icon color*/

.subject .category-color {
    height: 7px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

.subject.design .category-color,
.subject.design .icon i {
    background: #c0392b;
}

.subject.development .category-color,
.subject.development .icon i {
    background: #16a085;
}

.subject.photography .category-color,
.subject.photography .icon i {
    background: #2980b9;
}
/*hovering over subject*/

.subject.development:hover .header i {
    color: #16a085;
}

.subject.design:hover .header i {
    color: #c0392b;
}

.subject.photography:hover .header i {
    color: #2980b9;
}

.subject .title {
    margin: 12px 0px;
    border-bottom: dashed 1px #ccc;
    padding-bottom: 10px;
}

.subject .content {
    margin-bottom: 8px;
}

.subject .enrole {
    position: relative;
    color: #333;
    padding: 5px 12px;
    cursor: pointer;
    float: right;
    display: inline-block;
    border: solid 1px #ccc;
    -moz-transition: all 400ms linear;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.subject .enrole:hover,
.subject .enrole:active {
    background: #222;
    color: #fff;
}

#overview-row.container {
    width:1020px;
}


/*media queries for small devices*/

@media screen and (max-width: 678px) {
    .main-container {
        margin: 20px 15px;
    }
    .animation-element,
    .animation-element:nth-of-type(3n-1),
    .animation-element:nth-of-type(3n-2),
    .animation-element:nth-of-type(3n-0) {
        width: 100%;
        margin: 0px 0px 30px 0px;
    }
    .subject .header .date,
    .subject .header .category {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    .navbar-brand {
        width:160px;
    }

    .pricing.containing-image,
    .trial.containing-image,
    .containing-image {
        background-attachment:local;
        background-size:initial;
    }

    .scroll-to {
        bottom:15%;
    }

    .learn .row,
    #overview-row .row {
        margin-left:initial;
        margin-right:initial;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
    .trial-block {
        margin-top: 60px;
    }
    .faded-strip {
        /*        background:rgba(255,255,255,0.9);*/
        background-color:#34373C;
    }
    .navbar-collapse .nav-item {
        margin-bottom:15px;
    }
    .image-container {
        height: 250px;
    }
    body, p, a {
        font-size:16px;
        line-height: 26px;
    }
    .navbar-brand {
        width:160px;
    }
    .modal-content .col-10,
    .modal-content input,
    .modal-content label {
        max-width:100%;
        width:100%;
        /* -webkit-box-flex: 0; */
        -webkit-flex: initial;
        -ms-flex: initial;
        /* flex: 0 0 83.333333%; */
    }

    .form-check-label .form-check-input {
        width: 30px;
    }

    .navbar-toggleable-md {
        padding-top:5px;
        padding-bottom:10px;
    }

    .bottom-image .col-md-6 {
        margin-bottom:45px;
    }

    .bottom-image .col-md-6:last-child {
        margin-bottom:0;
    }

    .trial-text {
        height: 190px;
    }
   /* .feature-text-container {
        height:80px!important;
        }*/
        .trial-text:nth-child(2) {
            height: 150px;
        }
        #overview-row .cpd-overview, #overview-row .cpd-activities, #overview-row .cpd-status {
            margin-bottom:30px;
        }

        #overview-row .cpd-overview img,
        #overview-row .cpd-activities img,
        #overview-row .cpd-status img {
            margin-top:30px;
        }

        #nav-icon4 {
            margin:11px auto;
        }
        #price-row .col-sm-12 {
            margin-bottom:30px;
        }

        #price-row .col-sm-12:last-child {
            margin-bottom:0;
        }

        .bottom-image .col-sm-12 {
            margin-bottom:60px;
        }

        .bottom-image .col-sm-12:last-child {
            margin-bottom:0;
        }

        .learn .sub-heading {
            font-size:16px;
        }

        .nav-tabs .nav-item {
            width:100%;
        }

   /* .learn .tab-text {
        padding:0 15px;
        }*/

        .learn .tab-text {
            padding: 0px 248px;
            text-align: center;
            padding-bottom: 50px;
        }

        .learn .nav-tabs a img {
            float: initial;
            margin-top: -2px;
            position: relative;
            left: -5px;
            width: 6px;
        }

        .bottom-text-container {
            height: 160px!important;
        }

        .center-promo {
            padding-left: 0%;
            padding-right: 0%;
        }

    }

    /* Medium devices (tablets, less than 992px) */
    @media (max-width: 991px) {
        .faded-strip {
            /*        background:rgba(255,255,255,0.9);*/
            background-color:#34373C;
        }
        .navbar-collapse .nav-item {
            width: 60%;
            margin: 0 auto 15px;
        }
        .trial-text {
            height:228px;
        }

        .mainheader {
            color:#333333;
            font-weight: lighter;
            font-size: 26px;
            line-height: 32px;
        }


        .mainsubhead {
            color:#333333;
            font-weight: lighter;
            font-size: 18px;
            line-height: 26px;
        }

  /*  #trial-row .col-sm-12:last-child .trial-text {
        height:150px;
        }*/

        .bottom-text-container {
            height: 180px;
        }

        .feature-panel { margin-bottom:45px; }

        #features h2 { margin-top:60px; }

        #feature-row, #faq-row, #cta-row, #pricing-row, #price-row, #trial-row, #product-breakdown, #overview-row {
            padding:60px 0;
        }


        .info-panel { margin-top: 35px; margin-bottom:35px; }

        #info h2 { margin-top:60px; }

        #info-row, #faq-row, #cta-row, #pricing-row, #price-row, #trial-row, #product-breakdown, #overview-row {
         /* padding:60px 0;*/
     }



     #pricing-row {
        padding:60px 0 30px;
    }

    #faq-row {
        padding:45px 0 60px;
    }

    .feature-text-container {
     /* height:190px;*/
 }

 #cta-row .col-sm-12 {
    margin-bottom:45px;
}

#cta-row .col-sm-12:last-child {
    margin-bottom:0;
}

.cii {
    margin-bottom:20px;
}

.biba {
    margin-top:15px;
}

.tabs-container {
    /*height: 515px;*/
}

.feature-text-container {
  /*  height:110px!important;*/
}

.pricing.containing-image,
.containing-image {
    background-attachment:initial;
}
}
/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {

    .learn .tab-text {
        padding:0 135px;
        text-align: center;
        padding-bottom: 50px;
    }

    .navbar-brand {
        width:160px;
    }

    .mainheader {
        color:#333333;
        font-weight: lighter;
        font-size: 26px;
        line-height: 32px;
    }


    .mainsubhead {
        color:#333333;
        font-weight: lighter;
        font-size: 16px;
        line-height: 22px;
    }
}

@media screen and (min-width: 320px) and (max-width:580px ) {
    .feature-text-container {
        /*height:80px!important;*/
    }
    #product-breakdown .row {
        margin-left:0;
        margin-right:0;
    }
}

/* Bit of a hack */
@media screen and (min-width:768px) and (max-width:1199px) {
    .bottom-image h4 {
        height:40px;
    }
}

@media (max-width: 1199px) { #overview-row.container {width:850px;} }
@media (max-width: 1090px) { #overview-row.container {width:100%; padding-left: 20px; padding-right: 20px;} }
@media (max-width: 845px) { #overview-row.container {width:100%; padding-left: 20px; padding-right: 20px;} }
@media (max-width: 768px) { 
    .nav-item {
        margin: 0;
    }
    .learn .tab-text {
        padding: 0px;
        text-align: center;
        padding-bottom: 50px;
    }
    .learn .sub-heading {
        font-size: 16px;
        line-height: 26px;
    }
}
@media (max-width: 766px) {
  /*  .feature-image {
        display: none;
    }

    .learn .feature-image-mobile {
        display: inline-block;
        }*/
        .nav-tabs-container {
            text-align: left;
        }

        .mainheader {
            color:#333333;
            font-weight: lighter;
            font-size: 26px;
            line-height: 32px;
            text-align: center;
        }


        .mainsubhead {
            color:#333333;
            font-weight: lighter;
            font-size: 18px;
            line-height: 26px;
            text-align: center;
        }

    }

    div.above-footer {
        page-break-before: always;
    }

    div.seven {
        page-break-before: always;
    }


    @media (max-width: 450px) {
        .icon-arrow {
            display: inline-block !important;
        }

        .mainheader {
            color:#333333;
            font-weight: lighter;
            font-size: 24px;
            line-height: 32px;
            text-align: center;
        }


        .mainsubhead {
            color:#333333;
            font-weight: lighter;
            font-size: 14px;
            line-height: 22px;
            text-align: center;
        }

    }