@charset "UTF-8";
/* CSS Document */

 
body {
    margin: 0
	
}

 
 
#header {
	height:65px;
}

 
.container {
   /* max-width: 41em;*/
   width:960px;
    margin: 0 auto;
    padding: 0 1.5em
}

.container--wide {
    max-width: 51em
}

.block {
    margin-bottom: 1.5em
}

.block--mini {
    margin-bottom: .5em
}

 
 .nav a:link ,  .nav a:visited  {
	color:#fff; 
}

.nav a:hover, .nav a:focus, .nav a:active   {
	color:#000; 
	 	
}

.nav {
    padding: 0;
    list-style: none;
    margin-bottom: -5px;
    float: right
}

.nav__item {
    display: inline-block
}

@media screen and (min-width:40em) {
    .nav__item {
        display: inline-block
    }
}

.nav__item:hover {
    background-color:#97bbd8;
	color:#fff;
}

.nav__item a {
    display: inline-block;
    padding: 1em;
	padding-bottom:12px;
    border: 0
}

.btn {
    padding: .5em 1em;
    margin: 0;
    display: inline-block;
    border-radius: .25em;
    border: 1px solid rgba(41, 47, 54, 0.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px -1px rgba(41, 47, 54, 0.2);
    text-decoration: none;
    text-align: center;
    -webkit-transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
    transition: background-color .2s linear
}

.btn--primary {
    color: #292f36;
    background-color: #4ecdc4
}

.btn--primary:hover, .btn--primary:focus {
    border: 1px solid rgba(41, 47, 54, 0.2);
    color: #292f36;
    background-color: #3ac7bd
}

.btn--primary:focus {
    border-color: #292f36;
    outline: 0
}

.btn--secondary {
    color: #fff;
    background-color: #ff6b6b;
    text-shadow: 1px 1px 1px rgba(41, 47, 54, 0.5)
}

.btn--secondary:hover, .btn--secondary:focus {
    border: 1px solid rgba(41, 47, 54, 0.2);
    color: #fff;
    background-color: #ff5252
}

.btn--secondary:focus {
    border-color: #292f36;
    outline: 0
}

.btn--plain {
    border: 0;
    box-shadow: none;
    color: #556270
}

.btn:active {
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: 0
}

.btn--full {
    display: block
}

.island {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .5em;
    border-radius: .3em;
    background-color: #dee2e6
}

@media screen and (min-width:40em) {
    .island {
        padding: 1em
    }
}

.island--large {
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 1em
}

.feature {
    background-color: #4ecdc4;
    padding: 5em 0 2em 0;
    text-align: center
}

@media screen and (min-width:50em) {
    .feature {
        padding-top: 5.5em;
        padding-bottom: 2.5em
    }
}

.feature a {
    text-decoration: underline;
    color: #292f36
}

.feature strong {
    color: #fff;
    font-weight: normal;
    text-shadow: 1px 1px 1px #292f36
}

.feature__title {
    font-size: 2.5em;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    line-height: 1;
    display: block
}

@media(min-width:30em){.feature__title {
        font-size: 4.5em
    }
}

@media screen and (min-width:65em) {
    .feature__title {
        font-size: 5.25em
    }
}

.feature__subtitle {
    font-size: 1em;
    font-weight: normal;
    color: #292f36;
    margin: 0
}

@media(min-width:30em){.feature__subtitle {
        line-height: 1.25;
        font-size: 1.125em
    }
}

@media screen and (min-width:50em) {
    .feature__subtitle {
        line-height: 1.25;
        font-size: 1.25em;
        font-weight: normal
    }
}

.brand {
    display: inline-block;
    text-decoration: none;
    padding: 1em 0;
    color: #fff;
    -webkit-font-smoothing: antialiased
}

.brand__forename {
    font-weight: bold;
    color: #4ecdc4
}

.brand__surname {
    font-weight: normal;
    color: #fff
}

.header {
    background-color: #292f36
}

.header__link {
    color: #fff;
    text-decoration: none;
    border: 0
}

.header__link:focus {
    outline: 0;
    background-color: rgba(78, 205, 196, 0.1)
}

.header__link:hover .icon {
    color: #4ecdc4
}

.header--fixed {
    position: fixed;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0
}

 

@media screen and (min-width:40em) {
    .complimentary {
        display: inline
    }
}

.subdued {
    opacity: .6;
    text-shadow: none
}

a.subdued:hover {
    color: #000
}

.downloads {
    margin-bottom: 1.5em
}

.animated {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-4em)
    }

    100% {
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes slideDown {
    0% {
        -moz-transform: translateY(-4em)
    }

    100% {
        -moz-transform: translateY(0)
    }
}

@-o-keyframes slideDown {
    0% {
        -o-transform: translateY(-4em)
    }

    100% {
        -o-transform: translateY(0)
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-4em)
    }

    100% {
        transform: translateY(0)
    }
}

.animated.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-4em)
    }
}

@-moz-keyframes slideUp {
    0% {
        -moz-transform: translateY(0)
    }

    100% {
        -moz-transform: translateY(-4em)
    }
}

@-o-keyframes slideUp {
    0% {
        -o-transform: translateY(0)
    }

    100% {
        -o-transform: translateY(-4em)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-4em)
    }
}

.animated.slideUp {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp
}

@-webkit-keyframes swingInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(-90deg)
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg)
    }
}

@-moz-keyframes swingInX {
    0% {
        -moz-transform: perspective(400px) rotateX(-90deg)
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg)
    }
}

@-o-keyframes swingInX {
    0% {
        -o-transform: perspective(400px) rotateX(-90deg)
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg)
    }
}

@keyframes swingInX {
    0% {
        transform: perspective(400px) rotateX(-90deg)
    }

    100% {
        transform: perspective(400px) rotateX(0deg)
    }
}

.animated.swingInX {
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ie-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: swingInX;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: swingInX;
    -o-backface-visibility: visible !important;
    -o-animation-name: swingInX;
    backface-visibility: visible !important;
    animation-name: swingInX
}

@-webkit-keyframes swingOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg)
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(-90deg)
    }
}

@-moz-keyframes swingOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg)
    }

    100% {
        -moz-transform: perspective(400px) rotateX(-90deg)
    }
}

@-o-keyframes swingOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg)
    }

    100% {
        -o-transform: perspective(400px) rotateX(-90deg)
    }
}

@keyframes swingOutX {
    0% {
        transform: perspective(400px) rotateX(0deg)
    }

    100% {
        transform: perspective(400px) rotateX(-90deg)
    }
}

.animated.swingOutX {
    -webkit-transform-origin: top;
    -webkit-animation-name: swingOutX;
    -webkit-backface-visibility: visible !important;
    -moz-animation-name: swingOutX;
    -moz-backface-visibility: visible !important;
    -o-animation-name: swingOutX;
    -o-backface-visibility: visible !important;
    animation-name: swingOutX;
    backface-visibility: visible !important
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

.animated.flipInX {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInX;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }

    100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }

    100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }

    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.animated.flipOutX {
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    -moz-animation-name: flipOutX;
    -moz-backface-visibility: visible !important;
    -o-animation-name: flipOutX;
    -o-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px)
    }

    80% {
        -webkit-transform: translateY(-10px)
    }

    100% {
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes bounceInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-200px)
    }

    60% {
        opacity: 1;
        -moz-transform: translateY(30px)
    }

    80% {
        -moz-transform: translateY(-10px)
    }

    100% {
        -moz-transform: translateY(0)
    }
}

@-o-keyframes bounceInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(-200px)
    }

    60% {
        opacity: 1;
        -o-transform: translateY(30px)
    }

    80% {
        -o-transform: translateY(-10px)
    }

    100% {
        -o-transform: translateY(0)
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-200px)
    }

    60% {
        opacity: 1;
        transform: translateY(30px)
    }

    80% {
        transform: translateY(-10px)
    }

    100% {
        transform: translateY(0)
    }
}

.animated.bounceInDown {
    -webkit-animation-name: bounceInDown;
    -moz-animation-name: bounceInDown;
    -o-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(20px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-200px)
    }
}

@-moz-keyframes bounceOutUp {
    0% {
        -moz-transform: translateY(0)
    }

    30% {
        opacity: 1;
        -moz-transform: translateY(20px)
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(-200px)
    }
}

@-o-keyframes bounceOutUp {
    0% {
        -o-transform: translateY(0)
    }

    30% {
        opacity: 1;
        -o-transform: translateY(20px)
    }

    100% {
        opacity: 0;
        -o-transform: translateY(-200px)
    }
}

@keyframes bounceOutUp {
    0% {
        transform: translateY(0)
    }

    30% {
        opacity: 1;
        transform: translateY(20px)
    }

    100% {
        opacity: 0;
        transform: translateY(-200px)
    }
}

.animated.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    -moz-animation-name: bounceOutUp;
    -o-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}