a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

.cookie-banner {
    position: fixed;
    top: 60px;
    left: 15%;
    right: 15%;
    width: 70%;
    padding: 35px 14px 40px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 10px 1200px rgba(0, 0, 0, 0.6);
    z-index: 999;
}

/* Sticky footer styles */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}
@media (min-width: 768px) {
  html {font-size: 16px;}
}

.border-top {border-top: 1px solid #e5e5e5;}
.border-bottom {border-bottom: 1px solid #e5e5e5;}
.box-shadow {box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);}

/* Kyles CSS */
body {
    padding-top: 45px;
    padding-bottom: 20px;
}

.body-content {
    /* Set padding to keep content from hitting the edges on mobile */
    padding-left: 15px;
    padding-right: 15px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.text-center {text-align: center !important;}
.jumbotron {background: none !important;}

.navbar-inverse {
    /* Nav bar overrides */
    background-color: #060606 !important;
    border-bottom: 6px;
    border-color: #222;
    color: #222;
}

.navbar-nav > .active > a, .dark-color:hover, .navbar-nav > a:focus {
    background-color: #222 !important;
}

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

.dl-horizontal dt {
    /* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column */
    white-space: normal;
}

.css-opaque-hover:hover {opacity: 0.5;}

.css-highest-post-image {
    visibility: visible;
    max-width: 100% !important;
}

.panel-header {
    background-color: #f4f4f4;
    border-bottom: 1px solid #ddd;
    padding-top: 1rem !important;
    padding-left: 1em;
    padding-right: 1em;
}

/* Background images */
.responsive-background-image {
    background-image: url(/images/general/mountain.jpg);
    /* Center vertically and horizontally */
    background-position: center center;
    background-repeat: no-repeat;
    /* Image is fixed in the viewport so that it doesn't move if the page is taller. We don't want to see the background-color if we scroll down */
    background-attachment: fixed;
    background-size: cover;
    background-color: #B3BFCF;
}

.responsive-background-image-2 {
    background-image: url(/images/general/iceblur.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #11699e;
}

/* CSS specific to iOS devices */
@supports (-webkit-overflow-scrolling: touch) {
    .responsive-background-image {background-attachment: scroll;}
    .responsive-background-image-2 {background-attachment: scroll;}
}

/* Animation */
.bounce:hover {animation: 0.2s ease-in-out bouncy;}
@keyframes bouncy {
    0% { transform: translateX(0) }
    50% { transform: translateX(-5px)}
    100% {transform: translateX(0)}
}

.hover-pink:hover {animation: 0.5s ease-in-out forwards fadepink;}
@keyframes fadepink {
    0% {background-color: #222222;}
    100% {background-color: #ea4c89;}
}

.hover-insta:hover {animation: 0.5s ease-in-out forwards fadeinsta;}
@keyframes fadeinsta {
    0% {background-color: #222222;}
    90% {background-color: #db9d50;}

    100% {
        background-color: #fbad50;
        background: linear-gradient(to top right,#fbad50 10%,#bc2a8d 94%);
    }
}

.hover-linkedin:hover {animation: 0.5s ease-in-out forwards fadelinkedin;}
@keyframes fadelinkedin {
    0% {background-color: #222222;}
    100% {background-color: #0077B5;}
}

.hover-tumblr:hover {animation: 0.5s ease-in-out forwards fadetumblr;}
@keyframes fadetumblr {
    0% {background-color: #222222;}
    100% {background-color: #32506d;}
}

.hover-white:hover {animation: 0.5s ease-in-out forwards fadewhite;}
@keyframes fadewhite {
    0% {background-color: #222222;}
    100% {background-color: #666666;}
}

.fade-in-lazy-load-imgs {animation: 0.3s ease-in forwards fadeInOpacity;}
@keyframes fadeInOpacity {
    100% {opacity: 1;}
}

.fade-up-100 {
    animation-name: fadeUp100;
    -webkit-animation-name: fadeUp100;
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    opacity: 0;
}
.fade-up-1p5sec {
    animation-name: fadeUp100;
    -webkit-animation-name: fadeUp100;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    opacity: 0;
}
.fade-up-2sec {
    animation-name: fadeUp100;
    -webkit-animation-name: fadeUp100;
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    opacity: 0;
}
@keyframes fadeUp100 {
    from {transform: translate3d(0,50px,0)}
    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
@-webkit-keyframes fadeUp100 {
    from {transform: translate3d(0,50px,0)}
    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

/* Styling */
.drop-shadow {
    -webkit-filter: drop-shadow(2px 2px 8px #ccc);
    filter: drop-shadow(2px 2px 8px #ccc);
}

.footer-blue-line {
    height: 5px;
    background: linear-gradient(to right, #61c0d5 25%,#3964ab 100%);
    background: -webkit-linear-gradient(to right, #61c0d5 25%,#3964ab 100% );
}

.no-underline, .no-underline:hover, .no-underline:active, .no-underline:visited {
    text-decoration: none !important;
}

.btn-outline {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 30px;
    padding-right: 30px;
    background: linear-gradient(to bottom right, #0070ba 20%, #0070ba 100%);
    color: #fff;
    font-weight: bold;
}

.btn-outline:hover {
    background: #fff;
    background: linear-gradient(to bottom right, #00509a 20%, #00509a 100%);
    color: #fff;
}

.btn-small-round {
    background: #ffffff;
    font-weight: bold;
    border-radius: 5px;
}

.btn-my-blue {
    background-color: #2181e1 !important;
    border-color: #2181e1 !important;
}

.btn-my-blue-inverse {
    background-color: #fafafa !important;
    border-color: #2181e1 !important;
    color: #2181e1 !important;
}

.btn-black-inverse {
    background-color: #fafafa !important;
    border-color: #222 !important;
    color: #222 !important;
}

.btn-grey-inverse {
    background-color: #fff !important;
    border-color: #666 !important;
    color: #444 !important;
}

.btn-my-blue-inverse-white-bg {
    background-color: #fff !important;
    border-color: #1d72d1 !important;
    color: #1d72d1 !important;
}

.no-border {
    border: none !important;
}

.border-radius-5 {border-radius: 5px !important;}
.border-radius-10 {border-radius: 10px;}
.border-radius-15 {border-radius: 15px !important;}
.border-radius-5-top {border-radius: 5px 5px 0 0 !important;}
.border-radius-5-bottom {border-radius: 0 0 5px 5px !important;}

.flexboxgrid {
    display: flex;
    flex-wrap: wrap;
}

.img-avatar-32 {
    width: 32px;
    height: 32px;
    border-radius: 15px;
}

.img-avatar-22 {
    width: 22px;
    height: 22px;
    border-radius: 11px;
}

.tag {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    color: #ffffff;
    line-height: 1;
    vertical-align: middle;
    /*white-space: nowrap;*/
    text-align: center;
    border: #ccc 1px solid;
    border-radius: 10px;
}

.custom-tag {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
    border-radius: 10px;
    margin: 1px;
}

.tag-222 {
    color: #222;
    border: #222 1px solid;
}
.tag-555 {
    color: #555;
    border: #555 1px solid;
}
.tag-ccc {
    color: #ccc;
    border: #ccc 1px solid;
}
.tag-fff {
    color: #fff;
    border: #fff 1px solid;
}

.tag-circle {
    display: inline-block;
    min-width: 22px;
    padding: 3px 7px;
    font-size: 12px;
    color: #aaa;
    line-height: 1.3;
    vertical-align: middle;
    text-align: center;
    border: #aaa 1px solid;
    border-radius: 10px;
    margin: 1px;
}

.circle-browser-mock {
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 5px;
    width: 6px;
    height: 6px;
    line-height: 6px;
    padding: 0;
    border-radius: 50%;
    border: none;
}

.circle-28px-color {
    display: inline-block;
    margin: 5px 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    border-radius: 50%;
    text-indent: -23em;
    border: none;
}

.social-icon {
    display: inline-block;
    height: 30px;
    width: 30px;
    /*font-size: 1.6rem;
    line-height: 1.0;*/
    vertical-align: middle;
    text-align: center;
    margin-left: 6px;
    margin-right: 6px;
    background-color: #333;
    border-radius: 50px;
}

.tick-box-line {
    padding-left: 40px;
    padding-bottom: 10px;
    background: url(/images/icons/tick-icon.svg) no-repeat left 0px;
    background-size: 16px 16px;
}

.display-inline { display: inline !important;}
.display-inline-block { display: inline-block; }

/* Width */
.width-50 { width: 50%; }
.width-100 { width: 100%; }
.max-width-100 {max-width: 100%;}

/* Spacing */
.pad-top-0 { padding-top: 0px !important; }
.pad-top-10 { padding-top: 10px; }
.pad-top-20 { padding-top: 20px; }
.pad-top-30 { padding-top: 30px; }
.pad-top-40 { padding-top: 40px; }
.pad-top-50 { padding-top: 50px; }
.pad-top-60 { padding-top: 60px; }
.pad-top-70 { padding-top: 70px; }
.pad-top-80 { padding-top: 80px; }
.pad-top-100 { padding-top: 100px; }
.pad-top-120 { padding-top: 120px; }
.pad-top-150 { padding-top: 150px; }
.pad-top-180 { padding-top: 180px; }
.pad-bottom-0 { padding-bottom: 0px !important; }
.pad-bottom-10 { padding-bottom: 10px; }
.pad-bottom-20 { padding-bottom: 20px; }
.pad-bottom-30 { padding-bottom: 30px; }
.pad-bottom-40 { padding-bottom: 40px; }
.pad-bottom-50 { padding-bottom: 50px; }
.pad-bottom-60 { padding-bottom: 60px; }
.pad-bottom-70 { padding-bottom: 70px; }
.pad-bottom-80 { padding-bottom: 80px; }
.pad-bottom-100 { padding-bottom: 100px; }
.pad-bottom-150 { padding-bottom: 150px; }
.pad-bottom-180 { padding-bottom: 180px; }
.pad-right-10 { padding-right: 10px; }
.margin-top-0 { margin-top: 0px !important;}
.margin-top-10 { margin-top: 10px;}
.margin-top-20 { margin-top: 20px;}
.margin-bottom-0 { margin-bottom: 0px !important; }
.margin-bottom-4 { margin-bottom: 4px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-40 { margin-bottom: 40px; }
.margin-bottom-60 { margin-bottom: 60px; }

.no-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.margin-sides-only-5 {
    margin-right: 5px !important;
    margin-left: 5px !important;
}

.margin-sides-only-15 {margin-right: 15px !important;margin-left: 15px !important;}

.pad-sides-only-5 {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.pad-sides-only-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.pad-sides-only-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.left-heavy-thin-padding {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-right: 5px !important;
    padding-left: 15px !important;
}

.height-100 {height: 100%;}

.no-wrap {white-space:nowrap;}
.pre-wrap {white-space:pre-wrap;}


/* Color */
.color-000 { color: #000 !important; }
.color-111 { color: #111; }
.color-222 { color: #222 !important; }
.color-2a2a2a { color: #2a2a2a !important; }
.color-333 { color: #333; }
.color-444 { color: #444 !important; }
.color-555 { color: #555 !important; }
.color-666 { color: #666; }
.color-667 { color: #667777; }
.color-777 { color: #777 !important; }
.color-888 { color: #888888; }
.color-aaa { color: #aaa !important; }
.color-bbb { color: #bbb; }
.color-ccc { color: #ccc !important; }
.color-ddd { color: #ddd !important; }
.color-eee { color: #eee; }
.color-fff { color: #fff !important; }

.link-my-blue { color: #108cda !important; }
.color-my-blue { color: #0091ea !important; }
.bg-color-1a1 { background-color: #1a1a1a !important; }
.bg-color-222 { background-color: #222222 !important; }
.bg-color-888 { background-color: #888888 !important; }
.bg-color-white { background-color: #ffffff !important; }
.bg-color-grey-1 { background-color: #fafafa !important; }
.bg-color-grey-2 { background-color: #eaeaef !important; }
.bg-color-aaa { background-color: #aaaaaa !important; }
.bg-color-my-blue { background-color: #0091ea !important; }

.code-block { color: #ed143d; background-color: #f3f3f3; }
.code-block-header {
    font-weight: 600;
    color: #444;
    background-color: #f3f3f3;
    padding-left: 5px;
    margin-bottom: 0px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

/* Text & Font */
.google-font-1 { font-family: 'Raleway', sans-serif; }
.font-playfair { font-family: 'Playfair Display', serif; }
.font-oldstandardtt { font-family: 'Old Standard TT', serif; }
.font-serif { font-family: serif; }
.font-sourcesanspro { font-family: 'Source Sans Pro', sans-serif; }

.font-size-0p6 { font-size: 0.6em !important; }
.font-size-0p8 { font-size: 0.8em !important; }
.font-size-1p2 { font-size: 1.2em !important; }
.font-size-1p3 { font-size: 1.3em !important; }
.font-size-1p6 { font-size: 1.6em !important; }
.font-size-1p8 { font-size: 1.8em !important; }
.font-size-3em { font-size: 3em !important; }
.font-size-4em { font-size: 4em; }

.font-size-12 { font-size: 12px !important; }
.font-size-15 { font-size: 15px !important; }
.font-size-16 { font-size: 16px !important; }
.font-size-18 { font-size: 18px !important; }
.font-size-20 { font-size: 20px !important; }
.font-size-58 { font-size: 58px !important; }

.bold { font-weight: bold; }
.italic { font-style: italic; }
.lighter { font-weight: lighter; }
.underline { text-decoration: underline; }

.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.line-height-1p6 { line-height: 1.6; }
.line-height-1p8 { line-height: 1.8; }
.line-height-2p2 { line-height: 2.2; }

.letter-spacing-minus-1 { letter-spacing: -1px; }
.letter-spacing-minus-2 { letter-spacing: -2px; }
.letter-spacing-minus-2-minus-1-mobile { letter-spacing: -2px; }
.letter-spacing-plus-1 { letter-spacing: 1px; }
.letter-spacing-plus-2 { letter-spacing: 2px; }
.letter-spacing-1em { letter-spacing: 1em; }
.letter-spacing-2em { letter-spacing: 2em; text-indent: 2em; }

.cursor-pointer { cursor: pointer; }

.btn-dribbble, .btn-dribbble:active, .btn-dribbble:visited {
    color: #fff;
    padding: 16px 20px;
    border-radius: 30px;
    background-color: #ea4c89 !important;
}
.btn-tumblr, .btn-tumblr:active, .btn-tumblr:visited {
    color: #fff;
    padding: 16px 20px;
    border-radius: 30px;
    background-color: #0070ba !important;
}

.btn-dribbble:hover {
    animation: 0.5s ease-in-out forwards btndribbblefade;
}

@keyframes btndribbblefade {
    100% {background-color: #f47cab;}
}

/* Dummy text lines */
.dummy-text-line {
    height: 8px;
    line-height: 1.6rem;
    border-radius: 10px;
}

/* Modal settings */
.custom-modal-body {position: relative;}
.modal-backdrop {background-color: #fff; /* Override dark Bootstrap color */}
.modal-backdrop.fade {opacity: 0;}
.modal-backdrop.show {opacity: 0.95;}
.custom-modal-fade {transition: opacity 0.1s linear;}
.custom-modal-fade:not(.show) {opacity: 0;}
@media screen and (prefers-reduced-motion: reduce) {
    .custom-modal-fade {
        transition: none;
    }
    .modal.custom-modal-fade .modal-dialog {
        transition: none;
    }
}

/* Placeholder settings */
.block-placeholder {
    position: relative;
    overflow: hidden;
    display: block;
}

/* Positional settings */
/* Measured in X-by-Y */
/* Calculated as (Y*100)/X */
.block-ratio-3by1 {padding-top: 33.3%;}
.block-ratio-8by3 {padding-top: 37.5%;}
.block-ratio-3by2 {padding-top: 66.6%;}
.block-ratio-2by3 {padding-top: 150%;}
.block-ratio-2by1 {padding-top: 50%;}
.block-ratio-5by8 {padding-top: 62.5%;}
.block-ratio-4by3 {padding-top: 75%;}
.block-ratio-4by5 {padding-top: 125%;}
.block-ratio-1by1 {padding-top: 100%;}
.block-ratio-100by146 {padding-top: 146%;}

.float-centre-outer-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.float-centre-inner-content {
    position: relative;
    max-width: 820px;
    text-align: center;
}

.figure-img {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}

.photography-item {
    /*box-shadow: 0 0 9px rgba(82, 84, 86, .2);*/
}

.display-none { display: none !important; }
.hide-desktop { display: none !important; }
.hide-md-and-up { display: none !important; }

/* Media Screen Queries: Leave last to give priority */

/* Boostrap 3 grid sizes: xs >=768px, sm >=768px, md >=992px, lg >=1200px */
/* Apply to XS, SM blocks only */
@media only screen and (max-width: 991px) {
    .hide-xs-and-sm { display: none !important; }
    .hide-md-and-up { display: block !important; }
}

/* Apply to MD, LG, XL blocks only */
@media only screen and (min-width: 992px) {
    .pull-right-desktop-only {
        padding-right: 15px;
        padding-left: 0;
        text-align: right;
    }
    .pad-top-20-md-up{padding-top: 20px;}
    .pad-top-60-md-up {padding-top: 60px;}
}

/* Mobile specific styles */
@media only screen and (max-width: 768px) {
    .responsive-background-image {background-image: url(/images/general/mountainmobile.jpg);}
    .responsive-background-image-2 {background-image: url(/images/general/iceblurmobile.jpg);}

    .letter-spacing-1em-mobile { letter-spacing: 1em; text-indent: 1em; }

    .jumbo-custom {padding-top: 40px; padding-bottom: 20px;}
    .letter-spacing-minus-2-minus-1-mobile {letter-spacing: -1px;}
    .text-center-mobile {text-align: center !important;}

    .font-size-3em-mobile {font-size: 3em !important;}
    .font-size-2em-mobile { font-size: 2em !important; }
    .font-size-1p8em-mobile { font-size: 1.8em !important; }
    .font-size-1em-mobile { font-size: 1em !important; }
    .font-size-1p2em-mobile { font-size: 1.2em !important; }
    .font-size-0p8-mobile { font-size: 0.8em !important; }
    .font-size-30-mobile { font-size: 30px !important; }

    .icon-30px-mobile {
        height: 30px;
        width: 30px;
    }

    .hide-mobile { display: none !important; }
    .hide-desktop { display: block !important; }

    .pad-top-0-mobile { padding-top: 0px !important; }

    .pad-sides-0-mobile {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .pad-sides-5-mobile {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .pad-sides-10-mobile {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .top-post-notes-span::after {
        content: "\A";
        white-space: pre;
    }

    .block-ratio-2by1-mobile {padding-top: 50%;}

    .cookie-banner {
        position: fixed;
        top: 60px;
        left: 5%;
        right: 5%;
        width: 90%;
        padding: 10px 4px 10px 4px;
    }
}

@media only screen and (max-width: 540px) 
{
    .block-ratio-4by3-xs-mobile { padding-top: 66.67%; }
}

/* Desktop specific styles */
@media (min-width: 768px) {
    .pad-sides-30-desktop {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .pad-top-40-desktop {
        padding-top: 40px !important;
    }
}
/* LG specific styles */
@media (min-width: 992px) {
    .pad-sides-80-lg {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}