html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

a {
    color: yellowgreen;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

a:hover,
a:focus {
    color: forestgreen;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;

    /*background-image: url('../images/header.jpg');*/
    /*background-image: url('../images/header2.jpg');*/
    background-image: url('../images/header4.jpg');

    /* ANDY: zooms the image in or something */
    /*background-position: center;*/

    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px 70px;
    text-align: center;
}

header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 50px;
    font-weight: 300;
}

header .header-content .header-content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;

    /* ANDY: the white text of the slogan on top of the picture */
    /*color: rgba(255,255,255,.7);*/
    color: rgba(17, 22, 21, 1);
}

@media(min-width:768px) {
    header {
        /*ANDY: shorten the amount of the picture that appears, 100% means whole height of screen */
        /*min-height: 100%;*/
        min-height: 60%;
    }

    header .header-content {
        position: absolute;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
    }

	header .header-content .header-content-inner h1 {
    	font-size: 100px;
		}

    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px;
    }
}

.section-heading {
    margin-top: 0;
    margin-bottom: 20px;
}

.intro {
	color: #fff;

    /*ANDY: background colour of intro text*/
    /*background-color: #688491;*/
    background-color: #4f6369;

    padding: 70px 0;
    text-align: center;
}

.content {
    padding: 70px 0;
}

/* ANDY: means if width of browser window is <= max-width then apply this style - remove all that big spacing between features, on smaller devices */
@media(max-width:920px) {
    .content {
        padding-top: 70px;
        padding-bottom: 90px;
    }
}
@media(max-width:820px) {
    .content {
        padding-top: 60px;
        padding-bottom: 90px;
    }
}
@media(max-width:768px) {
    .content {
        padding-top: 50px;
        padding-bottom: 80px;
    }
}
@media(max-width:598px) {
    .content {
        padding-top: 10px;
        padding-bottom: 70px;
    }
}

.content-2 {
	color: #fff;
    background-color: #4a646a;
}

.content-3 {
	padding: 20px 0 40px;
	text-align: center;
}

.promo,
.promo h3,
.promo a:link,
.promo a:visited,
.promo a:hover,
.promo a:active {
    color: white;
	text-shadow: 0px 0px 40px black;
    text-decoration: none;
}

.promo-item {
    height: 200px;
    line-height: 180px;
    text-align: center;
}

.promo-item:hover {
    background-size: 110%; 
    border: 10px solid rgba(255,255,255,0.3);
    line-height: 160px;
}

.promo-item h3 {
    font-size: 40px;
    display: inline-block;
    vertical-align: middle;
}

.item-1 {
	background: url('../images/writing.jpg');
	}
	
.item-2 {
	background: url('../images/concert.jpg');
	}
	
.item-3 {
	background: url('../images/pencil_sharpener.jpg');
	}
		
.item-1,
.item-2,
.item-3 {
	background-size: cover;
	background-position: 50% 50%;
	}

.page-footer {
	text-align: center;
	}

.page-footer .contact {
	padding: 60px 0;
	background-color: #4a646a;
	color: #fff;
	}

.page-footer .contact p {
	font-size: 22px;
	font-weight: 300;
	}
	
.content-3 .glyphicon,	
.page-footer .contact .glyphicon {
	font-size: 32px;
	font-weight: 700;
	}
		
.page-footer .small-print {
	padding: 50px 0 40px;
	font-weight: 300;
	}

.text-light {
    color: rgba(255,255,255,.7);
}

.navbar-default {
    border-color: rgba(34,34,34,.05);
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

/* Andy added - bring logo in from left to avoid being crushed by beta banner. Be specific in css or else it won't work https://stackoverflow.com/questions/34640725/bootstrap-navbar-brand-left-margin-not-overriding */
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    /*margin-left: 3em;*/
}

/*When drop down menu, TODO work on this a bit, also need different one for when in scrolled down mode */
/*.navbar-default .navbar-nav>.open>a:focus {*/
    /*color: #fffbdc;*/
    /*background-color: #3f7a85;*/
/*}*/

.navbar-default .navbar-header .navbar-brand {
    color: yellowgreen;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
    color: #eb3812;
}

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
    color: #222;
}

.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
    color: yellowgreen;
}

.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
    color: yellowgreen!important;
    background-color: transparent;
}

.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
    background-color: transparent;
}

/*
ANDY: If width of browser window is >= 768 (magic bootstrap collapse point) then apply these
'transparent' then 'white background' when scrolled, styles.  Because if in menu collapsed state,
don't want any of these styles nor fancy style switching on scroll.
*/
@media(min-width:768px) {
    .navbar-default {
        border-color: rgba(255,255,255,.3);
        background-color: transparent;
    }

    .navbar-default .navbar-header .navbar-brand {
        color: rgba(255,255,255,.7);
        /*letter-spacing: 0.5em;*/
    }

    .navbar-default .navbar-header .navbar-brand:hover,
    .navbar-default .navbar-header .navbar-brand:focus {
        color: #fff;
    }

    /* White navbar text when scrolled to the top  */
    .navbar-default .nav > li>a,
    .navbar-default .nav>li>a:focus {
        /*color: rgba(255,255,255,.7);*/
    }

    .navbar-default .nav > li>a:hover,
    .navbar-default .nav>li>a:focus:hover {
        color: #fff;
    }

    /*
    Once have scrolled down a little, our custom javascript adds the .affix suffix to <nav> element
    causing these non transparent styles to kick in.

    Viz. page is scrolled down and background turns white via:
    */

    /* White background */
    .navbar-default.affix {
        border-color: #fff;
        background-color: #fff;
        box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.1);
    }

    /* logo text has fancy reduced spacing and turns green, when page scrolled down and background turns white */
    .navbar-default.affix .navbar-header .navbar-brand {
        /*letter-spacing: 0;*/
        color: yellowgreen;
    }

    /* Hover over logo text and it turns red */
    .navbar-default.affix .navbar-header .navbar-brand:hover,
    .navbar-default.affix .navbar-header .navbar-brand:focus {
        color: #eb3812;
    }

    /* Black text */
    .navbar-default.affix .nav > li>a,
    .navbar-default.affix .nav>li>a:focus {
        color: #222;
    }

    /* Hover over menu items and they turn green, when page scrolled down and background turns white */
    .navbar-default.affix .nav > li>a:hover,
    .navbar-default.affix .nav>li>a:focus:hover {
        color: yellowgreen;
    }
}

.btn-default {
    border-color: #fff;
    color: #222;
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    border-color: #eee;
    color: #222;
    background-color: #eee;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    border-color: #fff;
    background-color: #fff;
}

.btn-default .badge {
    color: #fff;
    background-color: #222;
}

.btn-primary {
    border-color: yellowgreen;
    color: #fff;
    background-color: yellowgreen;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    border-color: limegreen;
    color: #fff;
    background-color: limegreen;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    border-color: yellowgreen;
    background-color: yellowgreen;
}

.btn-primary .badge {
    color: yellowgreen;
    background-color: #fff;
}


.btn {
    border-radius: 300px;
    text-transform: uppercase;
}

.btn-lg {
    padding: 15px 30px;
}

::-moz-selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

::selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

img::selection {
    color: #fff;
    background: 0 0;
}

img::-moz-selection {
    color: #fff;
    background: 0 0;
}

.text-primary {
    color: yellowgreen;
}

.bg-primary {
    background-color: yellowgreen;
}



/*Beta banner - https://codepen.io/davidlazar/pen/dcxou*/
/*body:after{*/
  /*content: "beta";*/
  /*position: fixed;*/
  /*width: 75px;*/
  /*height: 20px;*/
  /*background: #EE8E4A;*/
  /*top: 7px;*/
  /*left: -20px;*/
  /*text-align: center;*/
  /*font-size: 12px;*/
  /*font-family: "Courier New";*/
  /*!*font-family: sans-serif;*!*/
  /*text-transform: uppercase;*/
  /*!*font-weight: bold;*!*/
  /*color: #fff;*/
  /*line-height: 22px;*/
  /*-ms-transform:rotate(-45deg);*/
  /*-webkit-transform:rotate(-45deg);*/
  /*transform:rotate(-45deg);*/

  /*z-index: 1031;*/
  /*letter-spacing: 1px;*/
/*}*/

/* ANDY: align glyph icon a little lower */
.navbar-brand .glyphicon {
  top: 4px;
}

/* ANDY: override bootstrap theme style */
blockquote {
  border-left: 0;
  font-style: italic;
  font-weight: lighter;
}

.section-heading {
  line-height: 1.5;
}

ul.checklist {
    list-style: none;
    padding-left: 0;
}

    ul.checklist li {
        text-decoration: none;
        margin-bottom: 1.5em;
        padding-left: 0;
    }

        ul.checklist li:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;

            /*font-family: FontAwesome;*/
            /*font-weight: normal;*/
            font-family: Arial, Font Awesome\ 5 Free;
            font-weight: 900;

            font-style: normal;
            text-transform: none !important;
            content: '\f00c';
            margin-right: 0.75em;
            color: green;
        }


        ul.checklist.checknormal li:before {
            content: '\f096';
            color: lightcoral;
        }

ul.checklist-feature li {
        margin-bottom: 1.2em;
}