// colours
$light-blue: #EEF8FF;
$pure-blue: #4C9DD4;
$dark-blue: #12678D;
$grey-blue: #CFDCE2;
$light-grey-blue: #E8EEF1;
$light-grey-yellow: #E5E5DA;
$pure-red: #CD3335;
$light-grey: #F2F2F2;
$medium-grey: #555;
$yellow: #CDB135;
$green: #5CB167;
$purple: #7E4695;

$ucas_blue: #d1e6fb;
$ucas_grey: #f3f2f2;
$ucas_green: #90a602;
$ucas_darkblue: #2a3e83;
$ucas_link: #304796;


$dark-grey-blue-text: #0c465f;

$grey-text: #777;
$grey-line: #ddd;
$text-col: #333;
$light-grey-text: #D0D2D3;
$grey-bg: #eee;
$dark-grey-bg: #444;

$light-pink-text: #f0c2c3;

// paths 
$image_path: "../../layout/";

// imports
@import 'mixins';
@import 'typography';
@import 'comments';
@import 'sprout';



/* =============================================================================
   Layout
   ========================================================================== */

// layout
.container-fluid {
    &.no-padding {
        padding-left:0;
        padding-right:0;
    }
    &.big-padding {
        padding-left: 7%;
        padding-right: 7%;
    }
}

.link-view-all {
    float: right;
    padding: 25px 0 0;
    margin:0;
    
    &.sub-page-return {
        padding-top:30px;
        a {
            color: $dark-blue;
        }
        &.red a {
            color: $pure-red;
        }
    }
}

// page sections
.section-main {
    margin-top: 15px;
    >div.row {
        padding-bottom: 40px;
    }
    &.no-border>div.row {
        border-bottom:none;    
    }
}
.section-page {
    border-top: 2px solid $grey-line;
    &.no-border {
        border-top:none;
    }
    h2 {
        //margin-top:0;
    }
    h3 {
        border-top: 1px solid $grey-line;
        padding-top: 15px;
    }
    > p:first-of-type {
        font-weight: 600;
        font-size: 20px;
    }
}

div.sub-pages {
    //border-top: 2px solid $light-grey-blue;
    margin-top: 25px;
    //padding-top: 25px;
    
    h2 {
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 25px;
    }
    
    &.x2 {
        .col-md-6:nth-of-type(2n+1) {
            clear: left;
        }
    }
    &.x3 {
        .col-md-4:nth-of-type(3n+1) {
            clear: left;
        }
    }
    &.x4 {
        .col-md-3:nth-of-type(4n+1) {
            clear: left;
        }
    }
}

.page-header {
    border-bottom: none;
    padding:15px 0 0;
    margin:0 0 25px;
    
    h2 {
        margin-bottom: 25px;
    }
    
    time {
        margin:0 0 12.5px;
        display: block;
    }
    
    img {
        height: 65px;   
        margin:0 0 30px;     
    }
    ul {
        margin:0 0 5px;
        padding:0;
        li {
            list-style: none;
            margin:0;
            padding:0 0 15px;
            a {
                color: $text-col;
            }
            span:after {
                content: ", ";
                display: inline;
            }
            span:last-child:after {
                content: "";
            }
        }
    }
    p.button {
        margin-bottom: 20px;
    }
    
    &.provider {
        margin: 25px 15px 0 0;
        border-top: 1px solid $grey-line;
        h2 {
            margin-top: 15px;
        }
        img {
            float: right;
            height: 80px;
        }
        
    }
    h4 {
        margin-bottom: 25px;
        a {
            color: $grey-text;
        }
    }
}

.simple-page {
    padding-top: 25px;
}


/* =============================================================================
   Header
   ========================================================================== */

// header
.header-banner {
    padding: 20px 0 0;
    
    .header-logo {
        float: left;
        width: 360px;
        margin-left: 15px;
    }
    .header-options {
        float: right;
        margin-right: 15px;
    }
    
    .helondon-logo {
        background-image: url("#{$image_path}logo-main.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        @include background-size();
        text-indent: -9999px;
        display: block;
        padding-top: 106 / 360 * 100%;
        font-size: 1px;
        line-height: 1px;
    }
    
    ul.banner_options {
        margin:10px 0 0;
        padding:0;
        float:right;
        font-size: 14px;
        text-transform: uppercase;
        li {
            list-style: none;
            float: left;
            padding:0;
            margin:9px 15px 0 0;
			
            &:last-child {
                margin-right: 0;
                margin-top: 0;
            }
            a {
                color: $text-col;
                
                &.btn-link {
	                text-decoration: underline;
                }
                
            }
        }
    }
}

// main nav 
.nav-main {
    
    margin-top: 25px;
    
    
    .h4 {
        font-size: 18px;
    }
    
    .navbar-brand {
        background-image: url("#{$image_path}logo-main.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        @include background-size();
        text-indent: -9999px;
        width: 220px;
        display: none;
    }
    
    .navbar-toggle {
        margin-right:0;
    }
    
    .navbar.navbar-default {
        background-color: $grey-blue;
        border: none;
        font-weight: 400;
        margin-top:0;
        margin:0;
        min-height: 0;
        padding-left: 7%;
        padding-right: 7%;
    }
    .navbar-collapse {
        padding-left: 0;
        padding-right:0;
    }
    .nav>li>a {
        padding:15px 25px;
        border-right: 1px solid #fff;
        color: $text-col;
        &:hover {
            background-color: darken($grey-blue, 5%);
        }
    }
    .nav>li:first-of-type a {
        border-left: 1px solid #fff;
        
    }
    // active
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
        background-color: $dark-blue;
        color: #fff;
    }
    
    // hide elements from full width banner
    .navbar {
        .get-involved {
            display: none;   
        }
        .navbar-form {
            display: none;
            border-top:none;
            margin-top:0;
            span {
                font-size: 18px;
            }
        }
    }
    
}

li.small-screen {
    display: none;
}

.breadcrumb {
    li,li.active,li a,
    >li+li:before {
        color: $text-col;
    }
}

.navbar-default .navbar-toggle {
    background-color: #fff;
    border-color: #fff;
}


/* =============================================================================
   Subnav
   ========================================================================== */

.sub-nav {
    
    border-top: 2px solid $grey-line;
    
    .list-group-item {
        border: none;
        border-bottom: 2px solid $grey-line;
        @include border-radius(0);
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 0;
        i {
            color: $light-grey-text;
            font-size: 14px;
        }
    }
    
    // active state
    .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
        color: $dark-blue;
        background-color: #fff;
        border-color: $grey-line;
        i {
            color: $dark-blue;
        }
    }
}

.dd_holder {
    display: none;
    margin-bottom: 25px;
}

.sub-filters.panel-default,
.section-rhs .panel-default {
    
    border: 2px solid $grey-line;
    @include border-radius(0);
    box-shadow: none;
    
    >.panel-heading {
        background-color: $grey-bg;
        color: #000;
        @include border-radius(0);
        border-bottom: 1px solid $grey-line;
        h4 a {
            display: block;
        }
    }
    
    label {
        font-weight: 400;
    }
    
    .list-group-item {
        
        border:none;
        border-bottom: 1px solid $grey-line;
        margin-bottom:0;
        @include border-radius(0);
        
        i {
            font-size: 14px;
        }
        
    }
    a.list-group-item {
        color: $pure-blue;
    }
    
}
.section-rhs .panel-default {
    margin-bottom: 10px;
}




/* =============================================================================
   Nav tabs
   ========================================================================== */

.nav-tabs {
    border-bottom: 3px solid $dark-blue;
    padding-left: 10px;
    font-size: 14px;
    margin-top: 25px;
    
    >li {
        margin-bottom: 0;
        a {
            background-color: $light-grey-yellow;
            border-color: $light-grey-yellow;
            color: $text-col;
            margin-right: 10px;
            padding: 10px 15px;
            &:hover {
                background-color: darken($light-grey-yellow, 5%);
                border-color: darken($light-grey-yellow, 5%);
            }
        }
    }
    
    // active tab
    >li.active>a, >li.active>a:hover, >li.active>a:focus {
        background-color: $dark-blue;
        color: #fff;
        border-color: $dark-blue;
    }
}



/* =============================================================================
   Home
   ========================================================================== */

// home hero
.home-hero {
    background-color: $pure-blue;
    background-image: url("#{$image_path}bg-homehero.png");
    background-repeat: no-repeat;
    background-position: left top;
    margin-bottom:0;
    text-align: center;
    h1 {
        color: #fff;
        margin-bottom: 50px;
    }
}

// home CTAs
.home-cta {
    
    @include background-stripe(50%, $pure-red, $purple);
    
    .cta-item {
        a {
            display: block;
            text-align: center;
            text-transform: uppercase;
            padding: 50px 20px;
            height: 230px;
            color: #fff;
            color: transparentize(#fff, 0.5);
            i {
                display: block;
                margin-bottom: 15px;
            }
            &:hover {
                text-decoration: none;
                color: transparentize(#fff, 0.3);
            }
        }
        
        &:nth-child(1) {
            background-color: $pure-red;
        }
        &:nth-child(2) {
            background-color: $dark-blue;
        }
        &:nth-child(3) {
            background-color: $green;
        }
        &:nth-child(4) {
            background-color: $purple;
        }
        
    }
    
}

// home news
.home-news {
    
    padding: 15px 0;
    
    h4 {
        color: #fff;
        a {
            color: #fff;
            margin-left: 15px;
            text-decoration: underline;
        }
    }
    .btn-float-right {
        margin-top: 3px;
        margin-bottom:0;   
    }
    
}



// home events
.home-events {
    padding: 30px 0;
    
    h3 {
        margin-bottom: 20px;
    }
    
    div.row {
        margin-bottom: 25px;
    }
    
}


/* =============================================================================
   Feature box
   ========================================================================== */

.wide-featurebox {
    margin:0 0 30px;
    
    .feature-box a figure {
        float: right;
        width: 225px;
        margin:0 0 0 25px;
        padding: 10px;
    }
}
.home-featurebox {
    margin:50px 0;
}

.feature-box {
    a {
        display: block;
        padding: 20px;
        
        h3,p {
            color: $dark-grey-blue-text;
        }
        
        h3 {
            margin-top: 10px;
            padding-top:0;
            border-top:none;
        }
        
        figure {
            margin:0 0 15px;
            padding:15px;
            border: 2px solid darken($grey-blue, 10%);
            img {
                width: 100%;
                display: block;
            }
        }
        
        
    }
    &.background-grey-blue a:hover {
        text-decoration: none;
        background-color: darken($grey-blue, 5%);
    }
    
}


/* =============================================================================
   Providers
   ========================================================================== */


// home hero
.providers-map {
    height: 400px;
    position: relative;
    
    .providers-hero {
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        z-index: 100;
        background-color: transparentize($pure-blue, 0.2);
        margin-bottom:0;
        height: 400px;
        text-align: center;
        h1 {
            color: #fff;
            margin-bottom: 40px;
        }
    }
}



/* =============================================================================
   Events
   ========================================================================== */

.hero-banner {
    margin:0;
    padding:0;
    img {
        width: 100%;
        display: block;
    }
}

.activity-alert {
    margin-top: 15px;
    margin-bottom: 0;
}



/* =============================================================================
   Get involved
   ========================================================================== */

.getinvolved-intro {
    padding: 0px 0 40px;
}


.getinvolved-cta {
    
    padding: 20px 0 40px;
    
    h3 {
        color: $pure-blue;
    }
    
    .promo-box:first-child {
        margin-top: 25px;
    }
    
}


/* =============================================================================
   UCAS
   ========================================================================== */

.header-ucas {
	
	header {
		background-color: #000;
		color: #fff;
		padding: 10px 15px;
		margin:20px 0 0;
		h2 {
			margin:0;
		}
	}
	
}

.header-ucas-inner {
	
	background-color: $ucas_grey;
	padding: 20px 15px;
	margin:0 0 20px;
	
}



/* =============================================================================
   Display boxes
   ========================================================================== */

.entry-display-box {
    
    margin:0 0 30px;
    text-align: center;
    
    a {
        display: block;
        text-decoration: none;
        padding-bottom: 10px;
        color: darken($pure-blue, 20%);
        position: relative;
        
        .well {
            background-color: transparent;
            border:none;
            margin:0;
        }
        
        time {
            display: block;
            padding-top: 5px;
        }
        h4 {
            text-decoration: none;
        }
        h3 {
            border-top:none;
            padding-top:0;
        }
        img {
            width: 100%;
            display: block;
            background-color: #fff;
            
            &.logo {
                width: auto;
                height: 55px;
                margin: 0 auto;
                border: 5px solid #fff;
            }
            
        }
        
        ul.category-tags {
            margin:0;
            padding:0;
            li {
                list-style: none;
                display: inline-block;
                margin:0 5px 5px;
                padding: 5px;
            }
        }
        
        p.category {
            position: absolute;
            top:0;
            right:0;
            background-color: transparentize(#000, 0.5);
            color: #fff;
            padding: 8px 15px;
            font-size: 14px;
        }
        
        &.background-pure-blue {
            
            h4,time {
                color: #fff;
            }
            
            &:hover {
                background-color: darken($pure-blue, 5%);
            }
        }
        
        &.background-dark-blue {
            
            h4,time {
                color: #fff;
            }
            
            &:hover {
                background-color: darken($dark-blue, 5%);
            }
        }
        
        &.background-light-grey:hover {
            background-color: darken($light-grey, 5%);
        }
        
        &.background-light-grey-yellow:hover {
            background-color: darken($light-grey-yellow, 5%);
        }
        
    }
    
    &.event {
        
        a {
            padding-bottom:0;
            
            time,ul.category-tags {
                color: $dark-grey-blue-text;
            }
            time.h5 {
                margin-top:0;
            }
            h4 {
                color: $dark-grey-blue-text;
                font-weight: 600;
            }
            h5 {
                color: $grey_text;
            }
             
            
        }
    }
    
    &.case {
        
        a {
            background-color: $grey-bg;
            
            h4 {
                color: $dark-grey-blue-text;
                font-weight: 400;
                margin-bottom: 12.5px;
                margin-top: 20px;
                padding-left: 10px;
                padding-right: 10px;
            }
            
            p.video-icon {
                position: absolute;
                top:0;
                right:0;
                background-color: transparentize(#000, 0.5);
                color: #fff;
                width: 50px;
                height: 50px;
                padding: 8px 0 0;
                text-align: center;
                font-size: 24px;
            }
            
        }
    }
    
    &.providers a {
        border: 1px solid $grey-line;
        h4 {
            padding-top: 15px;
            font-size: 18px;
            font-weight: 600;
        }
        img {
            width: auto;
            margin: 0 auto 15px;
            height: 70px;
            background-color: #fff;
            border: 10px solid #fff;
        }
        &:hover {
            background-color: $light-grey-blue;
        }
    }
    
    &.news {
        a {
            border: 2px solid $grey-line;
            padding-bottom:0;
            header {
                padding-left: 15px;
                padding-right: 15px;
                time {
                    margin-top:0;
                    padding-top:0;
                }
                h3 {
                    margin-top:0;
                }
            }
        }
        &.picture a {
            background-color: #000;
            header {
                position: absolute;
                left:0;
                right:0;
                top: calc(50% - 30px);
                color: #fff;
                z-index: 10;
            }
            img {
                opacity: 0.5;
                @include transition(opacity);
            }
            &:hover img {
                opacity: 0.7;
            }
        }
        &.words a {
            padding-top: 50%;
            @include transition(background-color);
            header {
                margin-top: -(50%); 
                padding-top: calc(25% - 30px);
            }
            &:hover {
                background-color: $light-grey-blue;
            }
        }
    }
    
}

.entry-display-list {
    
    margin:0 0 10px;
    padding: 15px 0;
    border-top: 2px solid $grey-line;
    
    &.featured {
        background-color: $grey-blue;
    }
    
        
    position: relative;
    
    .flag {
        position: absolute;
        top:-2px;
        right:13px;
        background-color: $pure-blue;
        color: #fff;
        padding: 8px 15px;
    }
    
    h3 {
        border-top:none;
        padding-top:0;
    }
    
    ul {
        margin:0;
        padding:0 15px 0 0;
        li {
            list-style: none;
            margin:0 10px 10px 0;
            padding:0;
            float: left;
            &.more {
                float: right;
                margin: 0 0 10px 20px;
            }
        }
    }
    
      
    
}

.promo-box {
    
    text-align: center;
    margin:0 0 25px;
    
    
    a {
        display: block;
        text-decoration: none;
        padding: 20px;
        color: #fff;
        
        h3 {
            color: #fff;
        }
    }
    
}

.display_toggle {
    float: right;
    .btn-default, .btn-default:hover, .btn-default:focus {
        border-color: $grey-line;
    }
    .btn-default:hover, .btn-default:focus {
        background-color: transparent;
        box-shadow: none;
    }
    .btn-default.active, .open>.dropdown-toggle.btn-default {
        color: $dark-blue;
        background-color: $grey-bg;
    }
}

.activity-cta-options {
    margin-top: 25px;
    background-color: lighten($green, 40%);
    border:none;
    box-shadow: none;
    @include border-radius(0);
    text-transform: uppercase;
    .btn {
        font-size: 14px;
    }
}

.list-count {
    text-align: right;
    border-bottom: 2px solid $grey-line;
    margin-bottom: 30px;
    padding: 15px 0;
    color: $grey-text !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    font-size: 14px !important;
}


/* =============================================================================
   Filterable lists of things
   ========================================================================== */
   

.clear-filters {
    padding: 10px;
    margin-bottom: 25px;
    
    a {
        float: right;
    }
    h4 {
        color:#fff;
        margin:0;
        padding-top: 5px;
    }
}

.results-header {
    
    margin: 20px 0;
    
    h5 {
        float: right;   
        margin-top: 8px; 
    }
    
    ul {
        margin:0;
        padding:0;
        li {
            list-style: none;
            margin:0 10px 10px 0;
            padding:0;
            float: left;
            a {
                background-color: $light-grey;
                color: $dark-blue;
                border: none;
            }
        }
    }
    
}

.pagination {
    text-transform: uppercase;
    >.active>a, >.active>span, >.active>a:hover, >.active>span:hover, >.active>a:focus, >.active>span:focus {
        background-color: $grey-blue;
        color: $pure-blue;
        border-color: $grey-blue;
    }
    >li>a, >li>span {
        border-color: $grey-blue;
    }
    a {
        color: $text-col;
    }
}

.filter-dd {
    max-width: 300px;
}

.toggle-filters {
    display: none;
}
.holder-filters {
    display: block;
}



/* =============================================================================
   RHS
   ========================================================================== */


.rhs-image-list {
    
    margin:0 0 25px;
    border: 2px solid $grey-line;
    
    p.link-view-all {
        padding: 7px 15px 0 0;
    }
    
    h4 {
        margin-bottom: 0;
        margin-top:0;
        padding:10px 15px;
        background-color: $grey-bg;
    }
    
    .media {
        border-bottom: 1px solid $grey-line;
        padding:15px;
        margin:0;
        
        &:last-of-type {
            border-bottom:none;
        }
        
        img {
            width: 80px;
        }
        
        .media-body {
            p {
                color: $grey-text;
                margin-bottom:0;
            }
            h4 {
                background-color: transparent;
                padding:0;
            }
            h5 {
                margin-top:5px;
            }
        }
        
    }
    
    
}

.rhs-details {
    
    a {
        color: $text-col;
    }
    
}

.rhs-categories {
    
}

.rhs-image {
    margin:0 0 10px;
    img {
        width: 100%;
    }
}
.rhs-map {
    margin:0 0 10px;
    border: 2px solid $grey-line;
}

.rhs-ucas {
	padding: 25px;
	background-color: $ucas_blue;
	
	h3 {
		margin:0;
		padding:0 0 20px;
	}
	
	ul {
		margin:0 0 30px;
		padding:0;
		li {
			list-style: none;
			margin:0 0 10px;
			padding:0;
		}
	}
	
	nav ul {
		border-top: 1px solid transparentize($ucas_link, 0.8);
		li a {
			color: $ucas_link;
			display: block;
			border-bottom: 1px solid transparentize($ucas_link, 0.8);
			padding: 8px 8px 8px 30px;
			position: relative;
			
			i {
				position: absolute;
				left:10px;
				top: 10px;	
			}
		}
	}
	
}



/* =============================================================================
   Contact page
   ========================================================================== */


.contact-page {
    padding-top: 25px;
}


/* =============================================================================
   Timeline
   ========================================================================== */




.timeline-intro {
    
    padding:20px 0 40px;
    
    .file-download {
        float: right;
        margin-top: 25px;
    }
    
}

.timeline-header {
    
    padding: 15px 0 30px;
    background-color: #fff;
    
    .timeline-term-select {
        font-size: 16px;
        margin-top: 25px;
        >li {
            margin-right: 5px;
            >a {
                color: $grey-text;
                @include border-radius(0);
                padding: 7px;
                &:hover,&:focus {
                    color: $grey-text;
                    background-color: transparent;
                }
            }
        }
        >li.active>a,
        >li.active>a:hover, 
        >li.active>a:focus {
            background-color: transparent;
            border-bottom: 5px solid $text-col;
            color: $text-col;
        }
    }
    
    .timeline-audience-form {
        float: right;
    }
    .audience-label {
        font-size: 14px;
        font-weight: 400;
        color: $grey-text;
    }
    button[type=submit] {
        vertical-align: bottom;
    }
    
}

.timeline-titles {
    
    position: relative;
    
    .row {
        margin-left:0;
        margin-right:0;
    }
    .header {
        text-align: center;
        background-color: $pure-blue;
        &:last-child {
            background-color: $green;
        }
        h3 {
            color: #fff;
            margin: 15px 0;
        }
    }
    
    .timeline-line {
        z-index: 10;
    }
    
}

.timeline-line {
    position: absolute;
    width: 5px;
    background-color: #000;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
}

.timeline-body {
    
    @include background-stripe (50%, lighten($pure-blue, 20%), lighten($green, 20%));
    padding: 20px 0;
    position: relative;
    
    
    
    .month {
        
        border-top: 1px solid transparentize(#000, 0.7);
        h5 {
            text-align: right;
            margin-top: 5px;
        }
        
        // term / half term
        h4,h3 {
            text-align: center;
            clear: both;
            span {
                background-color: #000;
                color: #fff;
                padding: 5px 10px;
                display: inline-block;                
            }
        }
        
        .timeline-entry {
            
            clear:both;
            float: left;
            width: 50%;
            padding-left:15px;
            padding-right:15px;
            @include box-sizing();
            
            article {
                margin:0 40px 25px 16.6%;
                
                a {
                    position: relative;
                    display: block;
                    padding: 15px;
                    background-color: $pure-blue;
                    color: #fff;
                    &:hover,&:focus {
                        text-decoration: none;
                        background-color: darken($pure-blue, 5%);
                        .angle {
                            background-color: darken($pure-blue, 5%);
                        }
                    }
                    
                    .angle {
                        width: 20px;
                        height: 20px;
                        background-color: $pure-blue;
                        position: absolute;
                        @include rotate();
                        left: auto;
                        right:-10px;
                        top: 18px;
                    }
                    .point {
                        position: absolute;
                        width: 40px;
                        height: 40px;
                        @include border-radius(50%);
                        background-color: $pure-blue;
                        border: 2px solid #000;
                        left: auto;
                        right:-75px;
                        top: 5px;
                        text-align: center;
                        padding-top: 3px;
                        @include box-sizing();
                        i {
                            margin-top: 6px;
                        }
                    }
                    
                    p.cats {
                        font-size: 14px;
                        color: lighten($pure-blue, 20%);
                    }
                }
            }
            &.planning {
                
                float: right;
                
                article {
                       
                    margin:0 16.6% 25px 40px;
                    
                    a {
                        background-color: $green;
                        &:hover,&:focus {
                            background-color: darken($green, 5%);
                            .angle {
                                background-color: darken($green, 5%);
                            }
                        }
                        .angle {
                            background-color: $green;
                            left: -10px;
                            right:auto;
                        } 
                        .point {
                            left: -75px;
                            right:auto;
                            background-color: $green;
                        }
                        p.cats {
                            color: lighten($green, 20%);
                        }
                    }
                }
            }
        }
        
    }
    
}

.modal-activities {
    color: $pure-blue;
}
.modal-planning {
    color: $green;
}
.modal-cats {
    color: $grey-text;
}


/* =============================================================================
   Twitter
   ========================================================================== */

.box-twitter {
    
    .twitter {
        
        padding: 60px 15px;
        position: relative;
        
        .twitter-tweet {
            padding: 15px 30px;
            
            h3 {
                color: #fff;
                margin-top:10px;
            }
            
            p {
                color: #fff;
                a {
                   color: $light-grey-text; 
                }
            }
            
            ul {
                margin:0;
                padding:0;
                text-transform: uppercase;
                color: $grey-text;
                li {
                    list-style: none;
                    margin:0;
                    padding:0;
                    a {
                        color: $grey-text;
                    }
                    &:first-child {
                        float: right;
                    }
                }
            }
        }
        
    }
    
}



/* =============================================================================
   Partners
   ========================================================================== */

.partners-scrolling {
    padding: 25px 0;
    border-bottom: 1px solid $grey-line;
    overflow-x: hidden;
    
    h3 {
        text-align: center;
        margin-bottom: 40px;
    }
    
    ul {
        margin:0;
        padding:0;
        width: 99999px;
        li {
            list-style: none;
            float: left;
            margin:0 30px;
            padding:0;
            
            a {
                display: block;
                
                img {
                    height: 50px;
                    display: block;
                    @include bw();
                    opacity: 0.7;
                    filter: alpha(opacity=70);
                }
                
                &:hover img {
                    @include bw(0);
                    opacity: 1;
                    filter: alpha(opacity=100);
                }
            }
            
            
        }
    }
    
}



/* =============================================================================
   Social share
   ========================================================================== */

.social-share {
    text-align: center;
    border-top: 2px solid $grey-blue;
    padding: 30px 0;
    margin:30px 0 10px;
    &.no-border {
        border-top:none;
        margin-top:0;
    }
}


.socials {
    margin:0;
    padding:10px 0 0;
    text-transform: uppercase;
    li {
        margin:0 5px;
        padding:0;
        width: 50px;
        list-style: none;
        display: inline-block;
        a {
            display: block;
            height: 50px;
            @include border-radius(50%);
            color: #fff;
            i {
                margin-top: 15px;
            }
        }
    }
}

.section-rhs .social-share {
    background-color: $dark-grey-bg;
    padding: 20px 0;
    .socials {
        color: #fff;
        padding-top:0;
    }
}


/* =============================================================================
   Search
   ========================================================================== */



.search-result {
    border-bottom: 1px solid $grey-blue;
    padding:0 0 5px;
    margin:0 0 5px;
    
    
    h4 {
        margin-bottom: 5px;
    } 
    p {
        color: $grey-text;
    }
    
}


/* =============================================================================
   Calendar
   ========================================================================== */

.fc-toolbar.fc-header-toolbar {
    background-color: $pure-red;
    margin-bottom:0 !important;
    padding: 10px;
    
    h2 {
        color: #fff;
    }
}

.fc-state-default {
    background-color: #fff !important;
    background-image: none !important;
    font-size: 14px !important;
    border-color: darken($grey-line, 25%) !important;
}
.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active {
    color: $pure-red !important;
    background-color: $grey-bg !important;
}

.fc-unthemed th {
    background-color: $dark-grey-bg;
    border-color: lighten($dark-grey-bg, 10%) !important;
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    padding:3px 0 !important;
    text-transform: uppercase;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    font-size: 12px;
}



/* =============================================================================
   Comments
   ========================================================================== */
   
.comments {
    
    @include border-radius(10px);
    
    h4 {
        padding: 20px;
        border-bottom: 2px solid #fff;
        margin:0;
        color: $pure-blue;
    }
           
}



/* =============================================================================
   Extras
   ========================================================================== */

.page-form {
    
    margin: 25px 0 40px;
    
    &.border-top {
        border-top: 2px solid $grey-blue;
        padding-top: 15px;
    }
    
    h3 {
        border-top:none;
        margin-top:0;
        padding-top:0;
    }
}

figure.page_img {
    margin:0 0 40px;
    padding:0;
    
    &.right {
        float: right;
        width: 50%;
        margin-left: 40px;
    }
    &.left {
        float: left;
        width: 50%;
        margin-right: 40px;
    }
    
    img {
        width: 100%;
        display: block;
    }
    figcaption {
        color: $grey_text;
        border-bottom: 2px solid $grey-blue;
        font-size: 14px;
        padding: 3px 0;
    }
}  

div.embed-responsive {
    clear: both;
    margin-bottom: 40px;
}


p.link {
    a {
        
    }
    
}
p.download {
    a {
       
    }
    
}

aside.map-container {
    margin:0 0 40px;
}
   
aside.slideshow {
    margin:0 0 40px;
    
    div.flexslider {
        margin:0;
        ul.slides li {
            padding:0;
            span {
                color: $grey_text;
                font-size: 14px;
            }
        }
        ul.flex-direction-nav {
            line-height: 1;
        }
    }
    
}  



/* =============================================================================
   Splash modal
   ========================================================================== */

#splash-modal {
    
    background-color: transparentize(#000, 0.4);
    
    .modal-content {
        
        background-color: $dark-blue;
        border:none;
        
        .modal-logo {
            background-image: url("#{$image_path}logo-main.png");
            background-repeat: no-repeat;
            background-position: 0 0;
            @include background-size(360px, 106px);
            
            width: 150px;
            height: 106px;
            margin:0 0 30px;
        }
        
        h3 {
            margin-top: 10px;
            color: #fff;
        }
        
        ul {
            margin:0;
            padding:0;
            li {
                list-style: none;
                margin:0 0 15px;
                padding:0;
                
                
                
                input[type=radio] {
                    display: none;
                }
                
                input[type=radio] + label {
                    display: block;
                    background-color: lighten($green, 15%);
                    @include border-radius(4px);
                    cursor: pointer;
                    font-weight: 400;
                    padding: 5px 10px;
                    margin:0;
                    color: darken($dark-blue, 5%);
                    
                    &:hover {
                        background-color: lighten($green, 20%);
                    }
                    
                    i {
                        float: right;
                        display: none;
                        margin-top: 4px;
                    }
                }
                
                input[type=radio]:checked + label {
                     background-color: #fff;
                     
                     &.institution {
                         @include border-radiuses (4px, 0, 0, 4px);
                     }
                     
                     i {
                         display: block;
                     }
                }
                
                .modal-select {
                    display: none;
                    padding: 15px 10px 10px;
                    background-color: #fff;
                    @include border-radiuses (0, 4px, 4px, 0);
                    
                    .btn-default {
                        //border-color:#fff;
                    }
                }
                
            }
        }
        
        p {
            color: #000;
        }
        
        .modal-footer {
            border-color: darken($dark-blue, 5%);
        }
    
    }
    
}




/* =============================================================================
   Loading overlay
   ========================================================================== */
   
div#loading {
    display: none;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: transparentize(#fff, 0.5);
    z-index: 200;
} 


/* =============================================================================
   Newsletter
   ========================================================================== */


.footer-newsletter {
    
    padding: 20px 0;
    
    .newsletter {
        text-align: center;
        padding:0 0 10px;
        
        h3 {
            color: #fff;
            margin-bottom: 25px;
        }
    }
        
}


/* =============================================================================
   Footer
   ========================================================================== */

.footer {
    
    padding: 30px 0;
    
    &.ucas .border {
	    border-top: 10px solid #000;
	    padding-top: 20px;
    }
    
    
    .footer-credits {
        
        //color: #fff;
        a {
            //color: #fff;
        }
        ul.socials {
            padding-top: 0;
            margin-top: -20px;
            float: right;
            li a {
                background-color: #fff;
                color: $text-col !important;
                text-align: center;
                border: 2px solid $text-col;
            }
        }
    }
    
    .footer-logos {
        text-align: center;
        margin: 40px 0;
        ul {
            margin:0;
            padding:0;
            li {
                list-style: none;
                display: inline;
                margin:0 10px;
                padding:0;
                a {                    
                    img {
                        height:80px;
                    }
                }
            }
        }
        
    }
    
}


/* =============================================================================
   Affix
   ========================================================================== */

.affix {
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: #fff;
}



/* =============================================================================
   Typo
   ========================================================================== */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-weight: 400;
    &.no-margin-top {
        margin-top:0;
    }
}

.show_filters {
    display: none;
}

.glyphicon-search {
    color: $dark-blue;
}

.btn-align-right {
    text-align: right;
}
.btn-float-right {
    float: right;
}
.btn-align-center {
    text-align: center;
}


/* =============================================================================
   set colours
   ========================================================================== */

// background colour usage definitions
.background-light-blue {
    background-color: $light-blue;
}
.background-pure-blue {
    background-color: $pure-blue;
}
.background-dark-blue {
    background-color: $dark-blue;
}
.background-grey-blue {
    background-color: $grey-blue;
}
.background-pure-red {
    background-color: $pure-red;
    color: #fff;
}
.background-light-grey {
    background-color: $light-grey;
}
.background-dark-grey {
    background-color: $text-col;
}
.background-mid-grey {
    background-color: $dark-grey-bg;
}
.background-light-grey-yellow {
    background-color: $light-grey-yellow;
}
.background-yellow {
    background-color: $yellow;
}


// buttons

.btn-pure-red {
    background-color: $pure-red;
    border-color: #fff;
    color: $light-pink-text;
    &:hover,&:focus,&:active {
        background-color: darken($pure-red, 5%);
        border-color: #fff;
        color: #fff;
    }
    &.disabled {
        &:hover {
            background-color: $pure-red;
            border-color: #fff;
        }
    }
    &.border-2px {
        border-width: 2px;
        border-color: $pure-red;
    }
}
.btn-dark-blue {
    background-color: $dark-blue;
    border-color: $dark-blue;
    color: $light-grey-blue;
    
    &:hover {
        background-color: darken($dark-blue, 5%);
        border-color: darken($dark-blue, 5%);
        color: #fff;
    }
    
    &.border-2px {
        border-width: 2px;
    }
}
.btn-darker-blue {
    background-color: darken($dark-blue, 5%);
    border-color: darken($dark-blue, 5%);
    color: $light-grey-blue;
    &:hover {
        background-color: darken($dark-blue, 10%);
        border-color: darken($dark-blue, 10%);
        color: $light-grey-blue;
    }
}
.btn-green {
    color: $green;
    background-color: lighten($green, 30%);
    border-color: lighten($green, 15%);
    &:hover,&:focus, &:active {
        background-color: lighten($green, 25%);
        border-color: lighten($green, 10%);
        color: darken($green, 5%);
    }
}
.btn-black {
    color: #fff;
    background-color: #000;
    border-color: #000;
    &:hover,&:focus, &:active {
        background-color: lighten(#000, 5%);
        color: darken(#fff, 5%);
        border-color: #000;
    }
}
.btn-grey {
    color: #000;
    background-color: $grey-bg;
    border-color: $grey-line;
}
.btn-grey-yellow {
    background-color: darken($light-grey-yellow, 10%);
    border-color: darken($light-grey-yellow, 10%);
    &:hover {
        background-color: darken($light-grey-yellow, 15%);
        border-color: darken($light-grey-yellow, 15%);
    }
}
.btn-blue-outline {
    background-color: transparent;
    border-color: $pure-blue;
    border-width: 2px;
    color: $pure-blue;
    &:hover {
        background-color: transparent;
        border-color: $dark-blue;
        color: $dark-blue;        
    }
}
.btn-white-outline {
    background-color: transparent;
    border-color: #fff;
    border-width: 2px;
    color: #fff;
    &:hover {
        background-color: transparent;
        border-color: transparentize(#fff, 0.2);
        color: transparentize(#fff, 0.2);       
    }
}
.btn-wide {
    padding-left: 35px;
    padding-right: 35px;
}

.btn-ucas-login {
	background-color: $ucas_green;
	border-color: transparent !important;
	padding: 12px;
	&:hover {
		background-color: darken($ucas_green, 5%);
	}
}

.btn-ucas-register {
	background-color: $ucas_darkblue;
	border-color: transparent !important;
	color: #fff;
	padding: 12px;
	&:hover {
		background-color: darken($ucas_darkblue, 5%);
		color: #fff;
	}
}

.btn-ucas-return {
	text-transform: none;
	border: 2px solid #ccc;
	font-size: 16px;
	
	span {
		margin-left: 5px;
		color: $ucas_link;
	}
}

.btn-ucas-tool {
	text-transform: none;
	border: 1px solid $pure-blue;
	font-size: 14px;
	margin-top:-9px;
	padding-top: 9px;
	padding-bottom: 9px;
	text-transform: uppercase;
	color: $pure-blue !important;
}

.btn-ucas-account {
	font-size: 16px;
	color: #c6c6c6;
	background-color: #333;
	border-color: #595959;
	padding-top: 5px;
	padding-bottom: 5px;	
	@include border-radius(0);
	
	&:hover {
		background-color: #444;
		border-color: #595959;
	}
	
	i {
		margin-left: 5px;
	}
}

.btn:not(.dropdown-toggle) {
    white-space: normal;
    
}
.link-black {
    color: #000;
    &:hover,&:focus, &:active {
        color: #000;
    }
}


// inputs

.search-text {
    width: 150px;
    border-color: $dark-blue;
    @include transition(width);
    font-size: 14px;
    text-transform: uppercase;
    &:focus {
        width: 250px;
    }
}


// breakpoints
@media (min-width: 1500px) {
    
    body {
        background-color: $grey-bg;
    }
    
    #site-wrapper {
        background-color: #fff;
        width: 1370px;
        margin:0 auto;
    }
    
    .container-fluid.big-padding {
        padding-left:0;
        padding-right:0;
        width: 1320px;
    }
    
    .nav-main {
        .navbar.navbar-default {
            padding-left: 25px;
            padding-right: 25px;
        }
    }
    
    .affix {
        width: 1370px;
    }
      
}

@media (min-width: 1340px) {
    
    .nav-main {
        .h4 {
            font-size: 20px;
        }
        .nav>li>a {
            padding:15px 30px;
        }
    }
    
}

@media (max-width: 1050px) {
	
	.header-banner ul.banner_options {
		
		margin-top:0;
		
		li {
			float:none;
			text-align: right;
			margin-top: 3px;
			margin-right:0;
			
			a.btn-link {
				text-decoration: none;
			}
			
			&:last-child {
				margin-top: 7px;
			}
			
			.form-group {
				margin-bottom:0;
			}
			
			.search-text {
				width: 100%;
			}
		}
		
	}
	
}

    
@media (max-width: 1023px) {
    
    .container-fluid.big-padding,
    .nav-main .navbar.navbar-default
     {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .header-banner {
        .navbar.navbar-default.h3 {
            font-size: 20px;
        }
        .nav > li {
            margin-right: 20px;
        }
    }
    
}


@media (max-width: 991px) {
    
    .dd_holder { 
        display: block;
    }
    .sub-nav {
        display: none;
    }
    
    // nav bar
    .navbar-nav {
        width: 100%;
        &>li {
            width: 33.333%;
            &:first-of-type {
                display: none;
            }
            a {
                text-align: center;
            }
            &:nth-child(2) a {
                border-left: 1px solid #fff;
            }
            &:nth-child(-n+4) a {
                border-bottom: 1px solid #fff;
            }
            &:nth-child(5) a {
                border-left: 1px solid #fff;
            }
        }
    }
    
    // logo
    .header-banner .header-logo {
        width: 300px;
    }
    
    .search-text:focus {
        width: 150px;
    }
    
    div.sub-pages.x3 {
        .col-md-4:nth-of-type(3n+1) {
            clear: none;
        }
        .col-md-4:nth-of-type(2n+1) {
            clear: left;
        }
    }
    
    // home cta
    .home-cta .container-fluid.big-padding {
        padding-left:0;
        padding-right:0;
        .row {
            margin-left:0;
            margin-right:0;
        }
    }
    
    // rhs socials
    .section-rhs {
        .social-share {
            padding-top: 10px;
        }
        .socials li:first-child {
            display: block;
            text-align: center;
            margin:0 auto 10px;
        }
    }
    
    // timeline
    .timeline-terms {
        display: none;
    }
    .timeline-header .timeline-audience-form{
        float:none;
        .form-group {
            float: left;
            margin-right: 15px;
        }
        button[type=submit] {
            margin-top: 29px;
        }
    }
    
}

@media (max-width: 815px) {
    
    .nav-tabs {
    
        >li {
            a {
                margin-bottom: 10px;
                @include border-radius(4px);
            }
        }
    }
    
    
}


@media (max-width: 767px) {
    
    
    .container-fluid.big-padding {
        padding-left: 15px;
        padding-right: 15px;
    }
    .nav-main {
        margin-top:0;
        .navbar.navbar-default {
            padding-left: 15px;
            padding-right: 15px;
        }
        .navbar-collapse {
            border-top:none;
        }
        .nav > li > a {
            padding: 5px;
            border:none !important;
        }
        .navbar-nav {
            margin:0 0 15px;
            li {
                &:first-of-type {
                    display: block;
                }
                width: auto;
                a {
                    text-align: left;
                }
            }
        }
    }
    li.small-screen {
        display: block;
    }
    
    // logo
    .header-banner {        
        .header-options {
            float:none;
            margin-left: 15px;
            ul.banner_options {
                margin-top: 25px;
                float:none;
                li {
                    float:none;
                    &:nth-child(-n+2) {
                        display: none;
                    }
                }
            }
        }
        .header-logo {
            margin:0 auto;
            float:none;
        }
    }
    .search-text,.search-text:focus {
        width: 100%;
    }
    
    // sprouts
    .simpleContact-form {
        .field {
            &:nth-child(-n+2) {
                float: none;
                width: 100%;    
            }
            &:first-child {
                margin-right: 0;
            }
        }
    }

    
    // home cta
    .home-cta .cta-item a {
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        
    }
    
    // home news 
    .home-news h4 {
        strong {
            display: block;
        }
        a {
            margin-left: 35px;
            display: block;
        }
    }
    
    
    // filters
    .toggle-filters {
        display: block;
    }
    .holder-filters {
        display: none;
    }
    
    // wide feature box
    .feature-box a figure {
        display: none;
    } 
    
    // providers
    .page-header.provider img {
        float:none;
        margin-bottom: 15px;
    }
    
    // back links
    .link-view-all {
        float:none;
        padding:0;
    }
    .rhs-image-list p.link-view-all {
        display: none;
    }
    
    .timeline-body .month .timeline-entry {
        article {
            margin-left:0;
        }
        &.planning article{
            margin-left: 40px;
            margin-right: 0;
        }
    }
    
    .header-banner ul.banner_options li .form-group {
		margin-bottom:15px;
	}
    
        
}

@media (max-width: 500px) {
    
    .home-news .btn-float-right {
        display: none;
    }   
    
}

@media (max-width: 350px) {
    
    .timeline-header .timeline-audience-form {
        .form-group {
            float:none;
        }
        button[type=submit] {
            margin-top: 0;
        }
    }
    
}