/* Assyst S18040 Programme Page quick wins SHADO-573 */

/* Change page background to slightly darker gray */
html {
    background-color: #f0f0f0;
}

/* Increase font size overall */
#mainContent div, #mainContent p, #mainContent ul, #mainContent ol{
    font-size: 16px;
}

/* Remove rounded corners */
.block{
    border-radius: 0;
}

/* light blue buttons */
.block .btn-blue{
    border-radius: 0;
    background-color: #0090e9;
    font-weight:bold;
}
.block .btn-blue:hover{
    background-color: #009ef2;
    color:#fff;
}

/* Increase padding */
.block-copy-wrap{
    padding:2em;
}
@media screen and (max-width: 639px){
    .block-copy-wrap{
        padding:1em;
    }
}

/* Remove shadows */
.block.box-shadow{
    box-shadow: none;
}

/* Hide the banner image below the programme name **/
.banner-image{ display:none; }

/* Make banner adjust height with text - no longer fixed height */
.block-banner{
    height: auto;
    overflow: auto;
    padding-top:2em;
}

/* Change the heading styles to match ND */
.block-banner h1 {
    position: static;
    padding: 0;
    margin: 0;
    font-size: 60px;
    line-height: 1.1em;
    color: #004b94;
    /* color: #333; */
    text-transform: none;
}
@media (max-width:1023px){
    .block-banner h1 {
        font-size: 48px;
    }
}
@media (max-width:639px){
    .block-banner h1 {
        font-size: 36px;
    }
}
@media (max-width:419px){
    .block-banner h1 {
        font-size: 28px;
    }
}
.block h2 {
    padding: 0;
    margin: 0;
    color: #00408d;
    font-size: 44px;
    line-height: 1em;
    margin-bottom: 40px;
}
.block-key-facts h2.key-facts-title{
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 44px;
    margin-bottom:0.5em;
}
.block h3 {
    padding: 0;
    margin: 0;
    color: #00408d;
    font-size: 28px;
    line-height: 1em;
    margin: 20px 0;
    border: none;
}
.block h4 {
    margin-top: 0;
}

/* Remove chevrons from lists (but keep key facts same */
.block.block-copy-wrap ul{
    list-style-type: disc;
    padding-left:20px;
    margin:20px 0;
}
.block.block-copy-wrap ul li{
    background:none;
    padding:0;
}
.block.block-key-facts .key-facts-list{
    padding:0;
}
.block.block-key-facts .key-facts-list li{
    padding: 5px 20px;
}

/* Make the inner block on planning tab appear as though not an inner block (!) */
.block-floating{
    background-color:#f1f1f1;
    posiiton:relative;
    top:-2em;
    left:2em;
    padding:0 0 0 1em;
}
@media screen and (max-width: 779px){
    .block-floating{
        top:0;
        left:0;
        padding: 0;
        /*padding:1em 1em 1px 1em;*/
        background-color:#fff;
        margin-bottom:2em;
    }
}

/* Change tabs style to sit inside banner */
.block.block-nav{
    margin-bottom:0;
    margin-top:2em;
}
.block.block-nav ul{
    overflow: auto;
}
.block.block-nav ul li{
    width:20%;
}
.block-nav ul > li > a{
    /* border-bottom:1px solid rgba(0,0,0,0.2); */
    border-left:none;
    text-align: center;
    padding-bottom:5px;
    text-decoration: underline;
}
.block-nav ul > li > a.active{
    background-color:#f0f0f0;
    /* border:1px solid rgba(0,0,0,0.2);
    border-bottom-color:#f0f0f0; */
    text-decoration: none;

    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.block-nav ul > li > a:hover, .block-nav ul > li > a:focus{
    background-color:#ddd;
    border-bottom-color:#ddd;
}
.block-nav ul > li.spacer{
    /* border-bottom:1px solid rgba(0,0,0,0.2); */
}
.block-nav ul > li.spacer-start{
    width:4%;
}
.block-nav ul > li.spacer-end{
    width:36%;
}
@media (max-width:999px){
    .block.block-nav ul li{
        width:30%;
    }
    .block-nav ul > li.spacer-start{
        width:5%;
    }
    .block-nav ul > li.spacer-end{
        width:5%;
    }
}
/** Change this media query to stack the icons only at mobile sizes */
@media screen and (max-width: 959px) and (min-width: 780px){
    .block-nav [class^="nav-icon-"], .block-nav [class*=" nav-icon-"] {
        display: inline-block;
        margin: 0;
    }
}
@media screen and (max-width: 639px){
    .block-nav [class^="nav-icon-"], .block-nav [class*=" nav-icon-"] {
        display: block;
        margin: 0 auto;
    }
}

/* CTA button container */
.block-cta-buttons{
    box-sizing: border-box;
    margin-bottom:20px;
}
.block-cta-buttons *{
    box-sizing: border-box;
}

/* CTA buttons take up half width. On mobile, fullwidth */
.cta-button{
    display: inline-block;
    width:50%;
}
/* Two CTA buttons in a row have some spacing */
.cta-button+.cta-button{
    padding-left:1em;
}
.cta-button a{
    display: block;
    text-transform: none;
    font-size:32px !important;
    font-style: normal;
    font-weight: normal;
    padding:15px;
    text-shadow: none;
    color: #fff;
    font-family: "NimbusSanNovCon-Med", sans-serif;
    text-align:center;
    white-space: nowrap;
}
@media screen and (max-width: 639px){
    .cta-button{
        display: block;
        width:100%;
    }
    .cta-button+.cta-button{
        padding-left:0;
        padding-top:1em;
    }
}

/* Icon inside CTA button a bit smaller */
.cta-button i{
    font-size: 0.7em;
    padding-left: 0.3em;
}

/* Apply now */
a.ready-to-enrol{
    background-color: #d95f00; /* Tui */
}
a.ready-to-enrol:hover, a.ready-to-enrol:focus{
    background-color: #eb6f00; /* Tui */
}

/* Enquire */
a.enquire{
    background-color: #0090e9; /* lt blue */
}
a.enquire:hover, a.enquire:focus{
    background-color: #009ef2; /* lt blue */
}

/* Hero image flush with feature info box */
.block-feature-image{
    margin-bottom:0;
}

/* Key facts padding */
.block-key-facts{
    padding:2em;
}
@media screen and (max-width: 639px){
    .block-key-facts{
        padding:1em;
    }
}

/* A good fit gray background */
.block-good-fit{
    background-color: #d8d8d8;
}

/* testinmony transparent bg */
.block-testimony{
    background-color: transparent;
}

/* KIS link border color */
.kisLink{
    padding:0;
    margin:0;
    width:50% !important;
    max-width: none !important;
    text-align:right;
}
#mainContent .kisLink img{
    border-color: #fff;
    max-width:250px;
    width:100%;
}
#mainContent .kisLink img:hover{
    border-color:#136079;
}
.kisLinkInfo{
    width:50%;
}
@media screen and (max-width: 1024px){
    .kisLink, .kisLinkInfo{
        width:100% !important;
    }
}
@media screen and (max-width: 779px){
    .kisLink, .kisLinkInfo{
        width:50% !important;
    }
}
@media screen and (max-width: 479px){
    .kisLink, .kisLinkInfo{
        width:100% !important;
    }
}

/* Better spacing around planning tools */
.planning-tools{
    padding:2em 0 0 2em;
}
@media screen and (max-width: 779px){
    .planning-tools{
        padding:1em 0 0 1em;
        background-color:#f1f1f1;
    }
}
.planning-tool{
    box-sizing: border-box;
    margin:0;
    padding:0 2em 2em 0;
    min-width:200px;
}
.planning-tool-third{
    max-width:33.33%;
}
.planning-tool p{
    max-width:none;
}
.planning-tool-third p{
    max-width:none;
}
@media screen and (max-width: 779px){
    .planning-tool-third{
        max-width:100%;
    }
    .planning-tool-third p{
        height:auto;
    }
}