@font-face {
    font-family: 'icomoon';
    src: url("../fonts/icomoon/icomoon.eot?srf3rx");
    src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* =======================================================
*
* 	Template Style 
*	Edit this section
*
* ======================================================= */
body {
    font-family: "Quicksand", Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.7);
}

@media screen and (max-width: 992px) {
    body {
        font-size: 16px;
    }
}

a {
    color: #2c98f0;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

a:hover, a:active, a:focus {
    color: #2c98f0;
    outline: none;
    text-decoration: none !important;
}

p {
    margin-bottom: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
    color: #000;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    margin: 0 0 30px 0;
}

figure {
    margin-bottom: 2.5em;
    float: left;
    width: 100%;
}

figure figcaption {
    font-size: 16px;
    width: 80%;
    margin: 20px auto 0px auto;
    color: #b3b3b3;
    font-style: italic;
    font-family: "Quicksand", Arial, sans-serif;
}

@media screen and (max-width: 480px) {
    figure figcaption {
        width: 100%;
    }
}

::-webkit-selection {
    color: #fff;
    background: #2c98f0;
}

::-moz-selection {
    color: #fff;
    background: #2c98f0;
}

::selection {
    color: #fff;
    background: #2c98f0;
}

#colorlib-page {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#colorlib-aside {
    padding-top: 1em;
    padding-bottom: 40px;
    float: left;
    width: 300px;
    position: fixed;
    overflow: scroll;
    z-index: 1001;
    background: #f2f3f7;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 768px) {
    #colorlib-aside {
        width: 300px;
        -moz-transform: translateX(-300px);
        -webkit-transform: translateX(-300px);
        -ms-transform: translateX(-300px);
        -o-transform: translateX(-300px);
        transform: translateX(-300px);
        padding-top: 4em;
    }
}

#colorlib-aside .author-img {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    margin-bottom: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

#colorlib-aside .email {
    display: block;
    font-size: 12px;
}

#colorlib-aside .number {
    display: block;
    margin-bottom: 2em;
    font-size: 12px;
}

#colorlib-aside #colorlib-logo {
    text-align: right;
    font-weight: 700;
    font-size: 30px;
    margin-bottom: .5em;
    display: block;
    width: 100%;
}

#colorlib-aside #colorlib-logo a {
    display: block;
    text-align: center;
    color: #000;
    padding-right: .3em;
}

#colorlib-aside #colorlib-main-menu {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    height: 200px
}

#colorlib-aside #colorlib-main-menu .collapse {
    display: block !important;
}

#colorlib-aside #colorlib-main-menu ul {
    text-align: center;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 768px) {
    #colorlib-aside #colorlib-main-menu ul {
        margin: 0 0 2em 0;
    }
}

#colorlib-aside #colorlib-main-menu ul li {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#colorlib-aside #colorlib-main-menu ul li a {
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    position: relative;
    padding: 10px 0;
    font-family: "Quicksand", Arial, sans-serif;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

#colorlib-aside #colorlib-main-menu ul li a:after {
    content: "";
    position: absolute;
    height: 1px;
    bottom: 7px;
    left: 0;
    right: 0;
    background-color: #2c98f0;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#colorlib-aside #colorlib-main-menu ul li a:hover {
    text-decoration: none;
    color: black;
}

#colorlib-aside #colorlib-main-menu ul li a:hover:after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

#colorlib-aside #colorlib-main-menu ul li.active a {
    color: #2c98f0;
}

#colorlib-aside #colorlib-main-menu ul li.active a:after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

#colorlib-aside .colorlib-footer {
    font-size: 15px;
    text-align: center;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    padding: 20px 20px;
    width: 100%;
}

@media screen and (max-width: 768px) {
    #colorlib-aside .colorlib-footer {
        position: relative;
        bottom: 0;
    }
}

#colorlib-aside .colorlib-footer span {
    display: block;
}

#colorlib-aside .colorlib-footer ul {
    padding: 0;
    margin: 0;
}

#colorlib-aside .colorlib-footer ul li {
    padding: 0;
    margin: 0;
    display: inline;
    list-style: none;
}

#colorlib-aside .colorlib-footer ul li a {
    color: rgba(255, 255, 255, 0.3);
    padding: 4px;
}

#colorlib-aside .colorlib-footer ul li a:hover, #colorlib-aside .colorlib-footer ul li a:active, #colorlib-aside .colorlib-footer ul li a:focus {
    text-decoration: none;
    outline: none;
    color: #2c98f0;
}

#colorlib-aside #colorlib-social-links {
    text-align: center;
    margin: 15px;
}

#colorlib-aside #colorlib-social-links div {
    margin: 10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-top: 13px;
    padding-bottom: 13px;
}

#colorlib-aside #colorlib-social-links div span a {
    color: rgba(0, 0, 0, 0.7);
}

#colorlib-aside #colorlib-social-links div span {
    margin: 10px;
}

.container-wrap {
    max-width: 1170px;
    margin: 0 auto;
}

#colorlib-main {
    width: calc(100% - 300px);
    float: right;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 768px) {
    #colorlib-main {
        width: 100%;
        padding: 0 1em;
    }

    #colorlib-hero {
        padding: 0;
    }

}

#colorlib-hero {
    min-height: 500px;
    background: #fff url(../images/loader.gif) no-repeat center center;
    width: 100%;
    float: left;
    margin-bottom: 2em;
    clear: both;
}

#colorlib-hero .flexslider {
    border: none;
    z-index: 1;
    margin-bottom: 0;
}

#colorlib-hero .flexslider .slides {
    position: relative;
    overflow: visible;
}

/* flexslider inlines `float: left` on every slide, and the vendor clearfix in
   flexslider.css ships with its `content` commented out - so .slides (and with
   it .flexslider) collapse to zero height whenever the .js-fullheight sizing
   hasn't been applied. The pager dots below are absolutely positioned at
   `bottom: 20px` against that box, which parks them ~150px ABOVE the hero,
   scrolled out of view. Containing the floats keeps the box a real height. */
#colorlib-hero .flexslider .slides:after {
    content: "";
    display: block;
    clear: both;
}

#colorlib-hero .flexslider .slides li {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 400px;
    position: relative;
}

/* On mobile, shift the crop slightly right of centre so more of the
   right-hand side of the photo is in view. */
@media screen and (max-width: 768px) {
    #colorlib-hero .flexslider .slides li {
        background-position: 58% center;
    }
}

#colorlib-hero .flexslider .flex-control-nav {
    bottom: 20px;
    z-index: 1000;
    left: 20px;
    float: left;
    width: auto;
    /* The row itself must not swallow taps meant for the slide content under
       it - only the dots are interactive. */
    pointer-events: none;
}

#colorlib-hero .flexslider .flex-control-nav li a {
    pointer-events: auto;
}

@media screen and (max-width: 768px) {
    #colorlib-hero .flexslider .flex-control-nav {
        right: 20px;
        /* Already centred horizontally (left + right are both set, so the row
           stretches and flexslider's own text-align: center takes over).
           Lifted from the original 100px. Kept clear of the ~50px occupied by
           the fixed .colorlib-nav-toggle hamburger at the top of the screen. */
        top: 65px;
        /* The base rule pins bottom: 20px; combined with top: 65px that would
           stretch the row over the whole hero and sit its z-index: 1000 box on
           top of the slide's buttons. Natural height keeps it a thin strip. */
        bottom: auto;
    }
}

/* Tablet and desktop: centre the dot row on the frosted panel instead of
   pinning it to the far left. The panel's left edge is the column's 15px
   padding plus .slider-text-inner's 2.5em, so its centre is that offset plus
   half the panel width - 150px on the 300px tablet panel, 230px on the 460px
   desktop one. translateX(-50%) pulls the row back by half its own width so it
   stays centred regardless of how many dots there are. 2.5em is kept as an em
   rather than resolved to pixels because body font-size steps 15px -> 16px at
   992px, which moves that padding with it. Vertical position is unchanged. */
@media screen and (min-width: 769px) and (max-width: 1199px) {
    #colorlib-hero .flexslider .flex-control-nav {
        left: calc(15px + 2.5em + 150px);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@media screen and (min-width: 1200px) {
    #colorlib-hero .flexslider .flex-control-nav {
        left: calc(15px + 2.5em + 230px);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

#colorlib-hero .flexslider .flex-control-nav li {
    /* Laid out in a row. flexslider's own stylesheet already defaults these to
       inline-block; the theme overrode it to block to stack them vertically. */
    display: inline-block;
    vertical-align: middle;
    /* Symmetric so the row's visual centre matches its box centre - a trailing
       right-only margin would throw the centring off by half a gap. */
    margin: 0 4px;
}

#colorlib-hero .flexslider .flex-control-nav li a {
    /* Unselected dots mirror the frosted hero panel (.slider-text .desc): the
       same translucent slate fill, the same 12px backdrop blur and the same
       white hairline, so the dots read as part of that one glass surface
       rather than as a separate light-grey control. The drop shadow keeps them
       off the photo where the background behind them is also dark. */
    background: rgba(15, 23, 42, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

#colorlib-hero .flexslider .flex-control-nav li a.flex-active {
    cursor: pointer;
    /* Selected dot inverts: blue moves out to the ring and the centre stays
       white. The ring is a real border rather than a box-shadow because
       box-sizing is border-box globally (bootstrap.css), so thickening it eats
       into the dot instead of growing it - the row never shifts as slides
       advance. */
    background: #fff;
    border-color: #2c98f0;
    border-width: 3px;
}

#colorlib-hero .flexslider .flex-direction-nav {
    display: none;
}

#colorlib-hero .flexslider .slider-text {
    display: table;
    opacity: 0;
    min-height: 500px;
    z-index: 9;
}

/* Reveal the hero text with an upward slide only - NOT a fade. The template's
   fadeInUp ramps opacity 0->1, which makes the frosted panel's translucent
   background start light (the photo showing through) and darken as it settles.
   That lighten-then-darken is very noticeable on mobile and repeats on every
   slide. Forcing full opacity plus a translate-only entrance keeps the glass
   at its final strength from the first frame, consistently. */
#colorlib-hero .flexslider .slider-text.fadeInUp {
    opacity: 1;
    -webkit-animation-name: heroRiseIn;
    animation-name: heroRiseIn;
}

@-webkit-keyframes heroRiseIn {
    from { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
    to { -webkit-transform: none; transform: none; }
}

@keyframes heroRiseIn {
    from { transform: translate3d(0, 30px, 0); }
    to { transform: none; }
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner {
    display: table-cell;
    vertical-align: middle;
    min-height: 700px;
    padding: 2.5em;
    position: relative;
}

@media screen and (max-width: 768px) {
    #colorlib-hero .flexslider .slider-text > .slider-text-inner {
        text-align: center;
        vertical-align: bottom;
    }

    @-webkit-keyframes glow {
        from {
            text-shadow: 0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px #fff,
            0 0 40px #fff
        }

        to {
            text-shadow: 0 0 20px #fff,
            0 0 30px #fff,
            0 0 40px #fff,
            0 0 50px #fff
        }
    }
}

/* Frosted-glass panel behind the hero text. backdrop-filter blurs only the
   slice of the background photo sitting behind the text, keeping the rest of
   the image crisp while making the headline/button readable. The rgba
   background is also the graceful fallback: browsers without backdrop-filter
   still get a tinted panel, so text stays legible everywhere. */
#colorlib-hero .flexslider .slider-text .desc {
    /* Fixed-size panel so it never grows/shrinks with each slide's text.
       Dimensions are set per breakpoint (desktop here, tablet + mobile below);
       content is vertically centred and the font sizes are tuned so the
       longest slide fits. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 460px;
    min-height: 250px;
    padding: 40px 45px;
    background: rgba(15, 23, 42, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* On mobile, give the frosted panel a FIXED size (width + min-height) with its
   content vertically centred, so it no longer grows/shrinks with each slide's
   text. The font sizes below are tuned so the longest headline/button of the
   current slides fits within this box. Also tighten the surrounding cell so
   the panel covers less of the photo. */
@media screen and (max-width: 768px) {
    #colorlib-hero .flexslider .slider-text > .slider-text-inner {
        padding: 1.2em;
    }

    #colorlib-hero .flexslider .slider-text .desc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        width: 270px;
        min-height: 150px;
        margin: 0 auto;
        padding: 20px 24px;
        border-radius: 12px;
    }
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner h1, #colorlib-hero .flexslider .slider-text > .slider-text-inner h2 {
    margin: 0;
    padding: 0;
    color: #f2f4f7;
    font-family: "Playfair Display", Georgia, serif;
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner h1 {
    margin-bottom: 18px;
    font-size: 40px;
    line-height: 1.3;
    font-weight: 700;
}

@media screen and (max-width: 768px) {
    #colorlib-hero .flexslider .slider-text > .slider-text-inner h1 {
        font-size: 22px;
        margin-bottom: 12px;
    }
}

/* Tablet / iPad (portrait AND landscape, up to 1199px): a small fixed panel
   so it doesn't cover a major part of the photo. The range extends to 1199px
   because iPad landscape (1024-1180) and iPad Pro portrait (1024) would
   otherwise fall into the wider desktop tier. Placed AFTER the base .desc / h1
   rules so these same-specificity overrides win in the cascade. */
@media screen and (min-width: 769px) and (max-width: 1199px) {
    #colorlib-hero .flexslider .slider-text .desc {
        width: 300px;
        min-height: 170px;
        padding: 22px 26px;
    }

    #colorlib-hero .flexslider .slider-text > .slider-text-inner h1 {
        font-size: 26px;
        margin-bottom: 12px;
    }
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner h2 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 300;
    font-family: "Quicksand", Arial, sans-serif;
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner h2 a {
    color: rgba(44, 152, 240, 0.8);
    border-bottom: 1px solid rgba(44, 152, 240, 0.7);
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner .heading-section {
    font-size: 50px;
}

@media screen and (max-width: 768px) {
    #colorlib-hero .flexslider .slider-text > .slider-text-inner .heading-section {
        font-size: 30px;
    }
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner s
.colorlib-lead {
    font-size: 20px;
    color: #fff;
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner p {
    margin-bottom: 0;
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner .btn {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    padding: 10px 15px !important;
    border: none;
    font-weight: 400;
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner .btn.btn-learn {
    /* Ghost / outline CTA: transparent with a crisp light border and light
       text - minimal, on-brand (introduces no second colour), and lets the
       frosted glass show through. Hover fills with the site accent blue so
       the brand colour appears on interaction. */
    color: #f2f4f7;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
}

#colorlib-hero .flexslider .slider-text > .slider-text-inner .btn.btn-learn:hover {
    color: #fff !important;
    background: #2c98f0;
    border: 1.5px solid #2c98f0 !important;
}

@media screen and (max-width: 768px) {
    #colorlib-hero .flexslider .slider-text > .slider-text-inner .btn {
        width: 100%;
    }
}

body.offcanvas {
    overflow-x: hidden;
}

body.offcanvas #colorlib-aside {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    width: 100%;
    background: #f2f3f7;
    z-index: 999;
    position: fixed;
}

body.offcanvas #colorlib-main, body.offcanvas .colorlib-nav-toggle {
    top: 0;
    -moz-transform: translateX(300px);
    -webkit-transform: translateX(300px);
    -ms-transform: translateX(300px);
    -o-transform: translateX(300px);
    transform: translateX(300px);
}

.colorlib-narrow-content {
    padding: 0 2.5em;
}

.colorlib-narrow-content .btn-primary {
    color: black;
}

.colorlib-narrow-content .btn-primary:hover {
    color: white;
}

@media screen and (max-width: 768px) {
    .colorlib-narrow-content {
        padding: 0;
    }
}

.no-gutters {
    margin: 0;
    padding: 0;
}

.colorlib-experience,
.colorlib-skills,
.colorlib-education,
.colorlib-blog,
.colorlib-work,
.colorlib-about,
.colorlib-services,
.colorlib-contact {
    padding-top: 2em;
    padding-bottom: 2em;
    clear: both;
    width: 100%;
    display: block;
}

.colorlib-blog {
    padding-bottom: 0em;
}

.book-reviews-results {
    margin-bottom: 50px;
}

.book-reviews-results .colorlib-heading {
    font-size: 25px;
    margin: 15px 0px;
}

.book-reviews-results .book-listing-title {
    margin-left: 15px;
}

.review-ratings label {
    display: grid;
}

.review-details-body .review-ratings, .review-min-read {
    margin: 2px;
}


@media screen and (max-width: 768px) {
    .colorlib-experience,
    .colorlib-skills,
    .colorlib-education,
    .colorlib-blog,
    .colorlib-work,
    .colorlib-about,
    .colorlib-services,
    .colorlib-contact {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

.author-img {
    /* about.jpeg is a full-body shot (1677x2348), so plain `cover` fits the
       whole figure into the 150px circle and leaves the face a few pixels
       across. Scaling to 250% and framing on the face crops it down to head,
       shoulders and shirt instead. Adjust the zoom with background-size
       and re-aim with background-position; both are in terms of the circle. */
    background-size: 250%;
    background-position: 52% 44%;
    background-repeat: no-repeat;
    position: relative;
}

.no-data-found {
    margin: 25px;
    padding: 7px
}

.no-data-found-text {
    padding: 40px;
    border: solid 1px lightgrey;
    text-align: center;
}


/* */
.colorlib-heading {
    font-size: 18px;
    margin-bottom: 2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 1.8;
    position: relative;
}

.colorlib-heading span {
    display: block;
}

@media screen and (max-width: 768px) {
    .colorlib-narrow-content {
        margin-bottom: 3em;
    }
}

@media screen and (max-width: 768px) {
    .colorlib-blog {
        margin-top: 50px
    }
}

.heading-meta {
    margin-bottom: 15px;
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #999999;
    font-weight: 500;
    letter-spacing: 5px;
}

.about-img {
    width: 100%;
    height: 600px;
    margin-bottom: 30px;
}

.about-desc h3 {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 500;
}

.hire {
    padding: 2em;
    background: #f9bf3f;
}

.hire h2 {
    line-height: 1.5;
}

.hire .btn-hire {
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    bordeR: 1px solid #000;
    padding: 2px 10px;
}

.fancy-collapse-panel .panel-default > .panel-heading {
    padding: 0;
}

.panel-heading a {
    padding: 20px 25px;
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Quicksand", Arial, sans-serif;
    background-color: #2c98f0;
    color: #fff;
    position: relative;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}

.panel {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
    border: none;
}

.panel-heading a:after {
    font-family: "icomoon";
    content: "\e115";
    position: absolute;
    right: 20px;
    font-size: 14px;
    font-weight: 400;
    top: 50%;
    line-height: 1;
    margin-top: -7px;
}

.panel-heading a.collapsed:after {
    content: "\e114";
}

.panel-heading a.collapsed {
    background: #f2f3f7;
    border: 1px solid #e6e6e6 !important;
    color: #333333;
}

.panel-body {
    padding: 1.5em;
    margin-top: 5px;
    border: 1px solid #e6e6e6 !important;
}

.timeline-centered {
    position: relative;
    margin-bottom: 30px;
}

.timeline-centered:before, .timeline-centered:after {
    content: " ";
    display: table;
}

.timeline-centered:after {
    clear: both;
}

.timeline-centered:before, .timeline-centered:after {
    content: " ";
    display: table;
}

.timeline-centered:after {
    clear: both;
}

.timeline-centered:before {
    content: '';
    position: absolute;
    display: block;
    width: 4px;
    background: #f2f3f7;
    top: 20px;
    bottom: 20px;
    margin-left: 29px;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 9px 9px 0;
    border-color: transparent #f2f3f7 transparent transparent;
    left: 0;
    top: 10px;
    margin-left: -9px;
}

.timeline-centered .timeline-entry {
    position: relative;
    margin-top: 5px;
    margin-left: 30px;
    margin-bottom: 10px;
    clear: both;
}

.timeline-centered .timeline-entry .timeline-entry-inner {
    position: relative;
    margin-left: -20px;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
    display: block;
    width: 40px;
    height: 40px;
    background: #2c98f0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    -moz-box-shadow: 0 0 0 5px #f2f3f7;
    -webkit-box-shadow: 0 0 0 5px #f2f3f7;
    box-shadow: 0 0 0 5px #f2f3f7;
    line-height: 40px;
    float: left;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon i {
    color: #fff;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.color-2 {
    background: #ec5453;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.color-3 {
    background: #f9bf3f;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.color-4 {
    background: #a84cb8;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.color-5 {
    background: #2fa499;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.color-none {
    background: #fff;
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
    position: relative;
    background: #f2f3f7;
    padding: 1.5em;
    margin-left: 60px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p + p {
    margin-top: 15px;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 {
    font-size: 20px;
    font-family: "Quicksand", Arial, sans-serif;
    font-weight: 500;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a {
    color: #000;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span {
    -webkit-opacity: .4;
    -moz-opacity: .4;
    opacity: .4;
    -ms-filter: alpha(opacity=40);
    filter: alpha(opacity=40);
    font-size: 16px;
}

.services {
    margin-bottom: 30px;
    padding: 1.5em;
    -webkit-box-shadow: 0px 0px 56px -8px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: 0px 0px 56px -8px rgba(0, 0, 0, 0.17);
    -ms-box-shadow: 0px 0px 56px -8px rgba(0, 0, 0, 0.17);
    -o-box-shadow: 0px 0px 56px -8px rgba(0, 0, 0, 0.17);
    box-shadow: 0px 0px 56px -8px rgba(0, 0, 0, 0.17);
    border-bottom: 2px solid #2c98f0;
}

.services .icon2 {
    display: block;
    margin-bottom: 20px;
}

.services .icon2 i {
    font-size: 30px;
    color: #2c98f0;
}

.services h3 {
    font-family: "Quicksand", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.services.color-2 {
    border-bottom: 2px solid #ec5453;
}

.services.color-2 .icon2 i {
    color: #ec5453;
}

.services.color-3 {
    border-bottom: 2px solid #f9bf3f;
}

.services.color-3 .icon2 i {
    color: #f9bf3f;
}

.services.color-4 {
    border-bottom: 2px solid #a84cb8;
}

.services.color-4 .icon2 i {
    color: #a84cb8;
}

.services.color-5 {
    border-bottom: 2px solid #2fa499;
}

.services.color-6 {
    border-bottom: 2px solid #4054b2;
}

.services {
    height: 250px;
    margin-bottom: 80px;
    position: relative;
    z-index: 0;
}

@media screen and (max-width: 768px) {
    .services {
        margin-bottom: 4em;
    }
}

.services .icon {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    width: 100px;
    height: 50px;
    display: table;
    margin: 0 auto;
    background: #2c98f0;
}

.services .icon:before, .services .icon:after {
    position: absolute;
    left: 0;
    right: 0;
    content: '';
}

.services .icon:before {
    top: -30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 30px 50px;
    border-color: transparent transparent #2c98f0 transparent;
}

.services .icon:after {
    bottom: -30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 50px 0 50px;
    border-color: #2c98f0 transparent transparent transparent;
}

.services .icon i {
    font-size: 30px;
    color: #fff;
    z-index: 1;
    display: table-cell;
    vertical-align: middle;
}

.services .desc {
    margin-top: 60px;
}

.services .desc h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.services.color-2 .icon {
    background: #ec5453;
}

.services.color-2 .icon:before {
    border-color: transparent transparent #ec5453 transparent;
}

.services.color-2 .icon:after {
    border-color: #ec5453 transparent transparent transparent;
}

.services.color-3 .icon {
    background: #f9bf3f;
}

.services.color-3 .icon:before {
    border-color: transparent transparent #f9bf3f transparent;
}

.services.color-3 .icon:after {
    border-color: #f9bf3f transparent transparent transparent;
}

.services.color-4 .icon {
    background: #a84cb8;
}

.services.color-4 .icon:before {
    border-color: transparent transparent #a84cb8 transparent;
}

.services.color-4 .icon:after {
    border-color: #a84cb8 transparent transparent transparent;
}

.services.color-5 .icon {
    background: #2fa499;
}

.services.color-5 .icon:before {
    border-color: transparent transparent #2fa499 transparent;
}

.services.color-5 .icon:after {
    border-color: #2fa499 transparent transparent transparent;
}

.services.color-6 .icon {
    background: #4054b2;
}

.services.color-6 .icon:before {
    border-color: transparent transparent #4054b2 transparent;
}

.services.color-6 .icon:after {
    border-color: #4054b2 transparent transparent transparent;
}

.progress-wrap h3 {
    font-size: 16px;
    font-family: "Quicksand", Arial, sans-serif;
    margin-bottom: 10px;
}

.progress {
    height: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #f2f3f7;
    overflow: visible;
}

.progress-bar {
    background: #2c98f0;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.2;
    color: #000;
    font-weight: 600;
    text-align: right;
    position: relative;
    overflow: visible;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
}

.progress-bar:after {
    position: absolute;
    top: -2px;
    right: 0;
    width: 10px;
    height: 10px;
    content: '';
    background: #2c98f0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

.progress-bar span {
    position: absolute;
    top: -22px;
    right: 0;
}

.progress-bar.color-1 {
    background: #2c98f0;
}

.progress-bar.color-1:after {
    background: #2c98f0;
}

.progress-bar.color-1 span {
    color: #2c98f0;
}

.progress-bar.color-2 {
    background: #ec5453;
}

.progress-bar.color-2:after {
    background: #ec5453;
}

.progress-bar.color-2 span {
    color: #ec5453;
}

.progress-bar.color-3 {
    background: #f9bf3f;
}

.progress-bar.color-3:after {
    background: #f9bf3f;
}

.progress-bar.color-3 span {
    color: #f9bf3f;
}

.progress-bar.color-4 {
    background: #a84cb8;
}

.progress-bar.color-4:after {
    background: #a84cb8;
}

.progress-bar.color-4 span {
    color: #a84cb8;
}

.progress-bar.color-5 {
    background: #2fa499;
}

.progress-bar.color-5:after {
    background: #2fa499;
}

.progress-bar.color-5 span {
    color: #2fa499;
}

.progress-bar.color-6 {
    background: #4054b2;
}

.progress-bar.color-6:after {
    background: #4054b2;
}

.progress-bar.color-6 span {
    color: #4054b2;
}

.colorlib-feature {
    text-align: left;
    width: 100%;
    float: left;
    margin-bottom: 40px;
    position: relative;
}

.colorlib-feature .colorlib-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    display: table;
    text-align: center;
    background: #f2f3f7;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
}

.colorlib-feature .colorlib-icon i {
    display: table-cell;
    vertical-align: middle;
    color: #2c98f0;
    font-size: 60px;
    height: 100px;
}

@media screen and (max-width: 1200px) {
    .colorlib-feature .colorlib-icon i {
        font-size: 40px;
    }
}

.colorlib-feature .colorlib-text {
    padding-left: 120px;
    width: 100%;
}

.colorlib-feature .colorlib-text h2, .colorlib-feature .colorlib-text h3 {
    margin: 0;
    padding: 0;
}

.colorlib-feature .colorlib-text h3 {
    font-weight: 500;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.colorlib-feature.colorlib-feature-sm .colorlib-text {
    margin-top: 30px;
}

.colorlib-feature.colorlib-feature-sm .colorlib-icon i {
    color: #2c98f0;
    font-size: 40px;
}

@media screen and (max-width: 1200px) {
    .colorlib-feature.colorlib-feature-sm .colorlib-icon i {
        font-size: 28px;
    }
}

.blog-entry {
    width: 100%;
    float: left;
    background: #fff;
    margin-bottom: 1em;
}

.recent-book-review {
    text-align: center;
}

.blog-entry .blog-img {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

/* Cover art comes from third-party URLs at unpredictable resolutions and
   aspect ratios (a 1524x2339 Amazon original next to a 320px-capped
   thumbnail), so sizing off the image itself renders a different box per
   card. The anchor becomes a fixed frame instead and the image fills it, so
   every cover is identical regardless of what the source file happens to be.
   The frame also carries the border/shadow and clips its content, which keeps
   the hover zoom inside the card rather than spilling over the title and
   neighbouring reviews. */
.blog-entry .blog-img a {
    display: block;
    width: 100%;
    max-width: 180px;
    height: 270px;
    overflow: hidden;
    line-height: 0;
    border: 1px solid lightgrey;
    box-shadow: 5px 5px grey;
    /* Matches bootstrap's .img-rounded on the image, which the frame's
       overflow clipping now supersedes. */
    border-radius: 6px;
}

.blog-entry .blog-img img {
    width: 100%;
    height: 100%;
    /* Covers sit at roughly 2:3, so filling the frame crops only a hair off
       the ones that differ - and never letterboxes inside the border. */
    object-fit: cover;
    object-position: center;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.blog-entry:hover .blog-img img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/* Kept after the base rules: an earlier copy of this block sat above them and
   lost to the later same-specificity declarations. */
@media screen and (max-width: 768px) {
    .blog-entry {
        margin-bottom: 2em;
    }

    .blog-entry .blog-img a {
        max-width: 160px;
        height: 240px;
    }
}

.blog-entry .desc h3 {
    font-size: 16px;
    margin: 20px 0px;
    line-height: auto;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: "Quicksand", Arial, sans-serif;
}

.blog-entry .desc h3 a {
    color: #000;
    text-decoration: none;
    font-size: large;
}

.blog-entry .desc span {
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
}

.blog-entry .desc span small {
    color: rgba(200, 5, 0, 1);
}

.MuiRating-label {
    margin-bottom: 0px;
}

.blog-entry .desc span small i {
    color: #999999;
    float: right;
}

.blog-entry .desc span .posted-date {
    color: #000;
}

.blog-entry .desc .lead {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
}

.recent-book-classification {
    padding: 5px 0px;
    overflow: hidden;
    text-transform: none;
}

@media screen and (min-width: 768px) {
    .recent-book-classification {
        height: 60px;
    }
}

.recent-book-name {
    height: 50px;
    margin: 7px 0px;
    text-align: center;
    /* Centre the title inside its fixed box so one- and two-line titles both
       sit level across the row. */
    display: flex;
    align-items: center;
    justify-content: center;
}

.recent-book-name h3 {
    /* .blog-entry .desc h3's 20px vertical margins overflow the 50px box and
       push the following blocks out of line; the flex centering above covers
       the spacing instead. Long titles clamp to two lines so every card's
       review excerpt starts at the same offset. */
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .blog-entry .desc span {
        margin-top: 15px;
    }
}

/* Introduction */

.glow-text {
    font-size: 80px;
    color: #f2f4f7;
    /* Static soft shadow instead of the old infinite white-glow animation:
       lifts the headline off the frosted panel cleanly without the
       overpowering neon pulse. */
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #999
    }

    to {
        text-shadow: 0 0 20px #fff,
        0 0 30px #fff,
        0 0 30px #999
    }
}


/*Book Reviews Listing Page*/
.review-info {
    display: inline-grid;
}

.book-review-info h3 {
    margin-top: 15px;
    margin-bottom: 5px;
    /* Titles run one to three lines. Left unbounded they shift the author,
       rating and excerpt down by a different amount in every card, so pin the
       block to two lines' worth and clamp the overflow. */
    height: 56px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.review-panel .authorName {
    /* One line, so a long author credit can't push the rating out of line. */
    display: block;
    height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-review-info a {
    color: #000;
}

.book-review-content-short a {
    color: #4e4e4e;
}

.border-content {
    height: 350px;
    margin: 20px 0px;
    border-bottom: 2px solid rgba(42, 42, 42, .05);
}

/* Bootstrap floats the .col-md-6 cards, so an over-tall card snags the float
   of the one after it and the grid staggers instead of forming clean rows.
   Flex ignores the floats and stretches every card in a row to the tallest,
   which keeps the row baselines aligned. Confined to >=768px because below
   that the columns have no width rule and rely on block layout to fill the
   screen - as flex items they would shrink to their content. */
@media screen and (min-width: 768px) {
    .book-reviews-grid {
        display: flex;
        flex-wrap: wrap;
    }

    /* .row's clearfix pseudo-elements would otherwise count as flex items. */
    .book-reviews-grid:before,
    .book-reviews-grid:after {
        display: none;
    }

    .book-reviews-grid > [class*="col-"] {
        display: flex;
    }

    .book-reviews-grid .review-panel {
        width: 100%;
    }
}

.book-review-footer {
    border-bottom: 2px solid rgba(42, 42, 42, .05);
    margin: 20px 0px;
    padding: 20px 80px;
}

.book-review-footer .icon {
    border: solid 1px grey;
    padding: 10px 15px;
}


.book-review-footer .icon span {
    margin: 0px 25px;
}

/* Same fixed-frame treatment as the "Latest Book Reviews" cards: cover art
   arrives at arbitrary resolutions and aspect ratios, so the anchor is sized
   and the image fills it. Every cover on the listing then matches exactly, and
   the frame's clipping keeps the hover zoom off the neighbouring card. */
.review-panel .book-cover-image {
    display: flex;
    justify-content: center;
}

.review-panel .book-cover-image a {
    display: block;
    width: 100%;
    max-width: 170px;
    height: 250px;
    overflow: hidden;
    line-height: 0;
    border: 1px solid lightgrey;
    box-shadow: 5px 5px grey;
    border-radius: 6px;
}

.review-panel .book-cover-image img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

@media screen and (max-width: 768px) {
    /* The flex centering above replaces the old padding-left: 28% /
       width: 60% pair that faked centring on stacked cards. */
    .review-panel .book-cover-image a {
        max-width: 150px;
        height: 220px;
    }

    .border-content {
        height: auto;
        overflow: visible;
        border: none;
    }

    .review-panel {
        text-align: center;
    }

    .book-review-content-short-wrapper {
        display: none;
    }

    .review-panel {
        border-bottom: groove 2px grey;
    }

}

.review-panel:hover .book-cover-image img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.blog-entry .posted-date {
    margin: 20px 30px 20px 20px;
}

.book-cover .posted-date {
    margin-top: 20px;
    /* Centred under the cover frame, which is itself centred in this column.
       Slightly down from the 15px body size so it reads as a caption. */
    text-align: center;
    font-size: 13px;
}

.review-heading {
    margin: 20px;
    padding-bottom: 5px;
}

@media screen and (max-width: 768px) {
    .review-heading {
        margin: 10px;
    }
}

.book-classification {
    height: 55px;
}

.book-classification a {
    color: rgba(200, 5, 0, 1);
}

.review-panel .review-ratings {
    margin-bottom: 5px
}

.book-review-content-short {
    height: 75px;
    overflow: hidden;
    text-transform: none;
    color: #4e4e4e;
}

#books-filter-bar {
    background: #f2f3f7;
}

/*Review  Details*/

.review-header .book-cover img {
    position: relative;
    max-width: 100%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border: 1px solid lightgrey;
    box-shadow: 5px 5px grey;
}

.review-header:hover .book-cover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.review-header .review-tags {
    font-size: 13px;
}

@media screen and (max-width: 768px) {

    .review-header .book-cover-image {
        padding-left: 15%;
    }

    .review-header .book-cover-image img {
        width: 80%;
        text-align: center;
    }

    .book-cover {
        margin-bottom: 20px;
    }

}

.review-details .row {
    margin-left: 0px;
    margin-right: 0px;
}

.review-details-body {
    background: white;
    z-index: 2;
}

.hero {
    border-bottom: groove;
    z-index: 1;
}

.review-details-body .review-stats {
    border-bottom: solid 3px #e1e1e18f;
    padding: 10px 10px 0px 10px;
}

.review-header {
    height: auto;
    margin: 20px 0px;
}

.review-summary h2 {
    margin: 10px 0px;
    text-align: center;
}

.review-details-body .review-min-read {
    float: right;
    border-bottom: 5px solid #edc001;
}

.review-details-body .review-ratings {
    float: left;
    border-bottom: 5px solid #edc001;
}

.review-details-header {
    /*background-image: url("https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1435515337l/23346490._SY475_.jpg");*/
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 40%;
    filter: blur(20px);
    -webkit-filter: blur(20px);
    position: absolute;
    height: calc(40% + 80px);
    width: 100%;
    overflow: hidden;
    z-index: -1;
}

.hero {
    position: relative;
}

.review-content .posted-date {
    float: right;
}

.review-details-body .review-content {
    border-radius: 8px;
    padding: 20px 40px;
    background: #f2f3f7;
    margin-bottom: 30px;
}

.book-review-info h3 h2 {
    font-family: Rubik, sans-serif;
    -webkit-font-smoothing: antialiased;
}


@media screen and (max-width: 768px) {
    .review-details-body .review-summary {
        margin: 20px 0px 25px 0px;
    }

    .review-details-body .review-ratings, .review-min-read {
        margin-left: 10px;
    }

    .review-details-body .review-stats {
        border: none;
    }

}

.book-review-info h1 {
    margin-bottom: 3px;
}

.review-details .book-classification a {
    color: black;
}


/* Position text in the middle of the page/image */
/*
WORK
*/

.work-menu span {
    margin: 10px 15px;
}

.work-menu span a {
    color: #000;
}

.work-menu span a.active {
    color: #2c98f0;
    font-weight: bold;
    letter-spacing: 1.1px;
}

.work-menu {
    border: outset 3px lightgrey;
    margin: 15px 0px;
    padding: 4px;
}

@media screen and (max-width: 768px) {

    .work-menu {
        overflow: auto;
        white-space: nowrap;
    }

    .work-menu a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 10px;
        text-decoration: none;
    }
}


/*Contact Form*/

.contact-form {
    margin-top: 70px;
}

.project {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height: 300px;
    width: 100%;
    display: block;
    margin-bottom: 30px;
}

.project .desc {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2c98f0;
    opacity: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.project .desc .con {
    padding: 20px;
    display: block;
    position: relative;
    height: 300px;
}

.project .desc .con .icon {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.project .desc .con .icon span {
    display: inline;
    padding-right: 5px;
}

.project .desc .con .icon span a {
    color: #333333;
    padding: 5px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

.project .desc .con .icon i {
    font-size: 16px;
    color: #333333;
}

.project .desc h3 {
    font-family: "Quicksand", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    margin-bottom: 15px;
}

.project .desc h3 a {
    color: #fff;
}

.project .desc span {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
}

.project .desc span a {
    color: #000;
}

@media screen and (max-width: 768px) {
    .project .desc {
        opacity: 1;
        background: rgba(0, 0, 0, 0.4);
    }

    .project .desc h3 {
        font-style: 28px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        color: #000;
    }

    .project .desc span {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.project:hover .desc {
    opacity: 1;
}

.project:hover .desc h3 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.project:hover .desc span {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.btn-load-more {
    width: 100%;
}

#colorlib-counter {
    position: relative;
    clear: both;
    margin-bottom: 5em;
}

.colorlib-counters {
    padding: 3em 0;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

.colorlib-counters .overlay {
    z-index: 0;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
}

.colorlib-counters .icon {
    width: 100px;
    height: 100px;
    display: table;
    margin: 0 auto;
    margin-bottom: 20px;
}

.colorlib-counters .icon i {
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    font-size: 50px;
    color: #2c98f0;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

.colorlib-counters .counter-wrap {
    border: 1px solid red !important;
}

.colorlib-counters .colorlib-counter {
    font-size: 40px;
    display: block;
    color: white;
    font-family: "Quicksand", Arial, sans-serif;
    width: 100%;
    font-weight: 700;
    margin-bottom: .3em;
}

.colorlib-counters .colorlib-counter-label {
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 5px;
    margin-bottom: 2em;
    display: block;
}

.colorlib-social {
    padding: 0;
    margin: 0;
    text-align: center;
}

.colorlib-social li {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.colorlib-social li a {
    font-size: 22px;
    color: #000;
    padding: 10px;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    border-radius: 7px;
}

@media screen and (max-width: 768px) {
    .colorlib-social li a {
        padding: 10px 8px;
    }
}

.colorlib-social li a:hover {
    color: #2c98f0;
}

.colorlib-social li a:hover, .colorlib-social li a:active, .colorlib-social li a:focus {
    outline: none;
    text-decoration: none;
    color: #2c98f0;
}

#map {
    width: 100%;
    height: 700px;
}

@media screen and (max-width: 768px) {
    #map {
        height: 200px;
    }
}

.colorlib-bg-color {
    background: #fafafa;
    position: relative;
}

.pagination {
    padding: 0;
}

.pagination li {
    margin: 2px;
}

.pagination li a {
    color: #000;
    background: transparent;
    color: #000;
    margin: 2px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.pagination li a:first-child {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
}

.pagination li a:hover, .pagination li a:focus {
    background: #2c98f0;
    color: #fff;
    border: 1px solid #2c98f0;
}

@media screen and (max-width: 768px) {
    .pagination li a {
        padding: 7px 15px;
    }
}

.pagination li.active a {
    background: #2c98f0;
    border: 1px solid #2c98f0 !important;
}

.pagination li.active a:hover, .pagination li.active a:focus {
    background: #2c98f0;
    color: #fff;
    border: 1px solid #2c98f0 !important;
}

.btn {
    margin-right: 4px;
    margin-bottom: 4px;
    font-family: "Quicksand", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding: 8px 15px !important;
}

.btn.btn-sm {
    padding: 4px 15px !important;
}

.btn.btn-md {
    padding: 8px 20px !important;
}

.btn.btn-lg {
    padding: 18px 36px !important;
}

.btn:hover, .btn:active, .btn:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-primary {
    background: #dddddd;
    color: #fff;
    border: 2px solid #2c98f0;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: #44a4f2 !important;
    border-color: #44a4f2 !important;
}

.btn-primary.btn-outline {
    background: transparent;
    color: #2c98f0;
    border: 2px solid #2c98f0;
}

.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
    background: #2c98f0;
    color: #fff;
}

.btn-success {
    background: #5cb85c;
    color: #fff;
    border: 2px solid #5cb85c;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
    background: #4cae4c !important;
    border-color: #4cae4c !important;
}

.btn-success.btn-outline {
    background: transparent;
    color: #5cb85c;
    border: 2px solid #5cb85c;
}

.btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active {
    background: #5cb85c;
    color: #fff;
}

.btn-info {
    background: #5bc0de;
    color: #fff;
    border: 2px solid #5bc0de;
}

.btn-info:hover, .btn-info:focus, .btn-info:active {
    background: #46b8da !important;
    border-color: #46b8da !important;
}

.btn-info.btn-outline {
    background: transparent;
    color: #5bc0de;
    border: 2px solid #5bc0de;
}

.btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active {
    background: #5bc0de;
    color: #fff;
}

.btn-warning {
    background: #f0ad4e;
    color: #fff;
    border: 2px solid #f0ad4e;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background: #eea236 !important;
    border-color: #eea236 !important;
}

.btn-warning.btn-outline {
    background: transparent;
    color: #f0ad4e;
    border: 2px solid #f0ad4e;
}

.btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active {
    background: #f0ad4e;
    color: #fff;
}

.btn-danger {
    background: #d9534f;
    color: #fff;
    border: 2px solid #d9534f;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: #d43f3a !important;
    border-color: #d43f3a !important;
}

.btn-danger.btn-outline {
    background: transparent;
    color: #d9534f;
    border: 2px solid #d9534f;
}

.btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active {
    background: #d9534f;
    color: #fff;
}

.btn-outline {
    background: none;
    border: 2px solid gray;
    font-size: 16px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.btn-outline:hover, .btn-outline:focus, .btn-outline:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    border: transparent;
    background: #f2f3f7;
    height: 54px;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.form-control:active, .form-control:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: transparent;
    background: #f0f0f0;
}

#message {
    height: 130px;
}

.colorlib-nav-toggle {
    cursor: pointer;
    text-decoration: none;
}

.colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
    background: #000;
}

.colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
    background: #000;
}

.colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
    outline: none;
}

.colorlib-nav-toggle i {
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: 30px;
    height: 2px;
    color: #000;
    font: bold 14px/.4 Helvetica;
    text-transform: uppercase;
    text-indent: -55px;
    background: #000;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
    content: '';
    width: 30px;
    height: 2px;
    background: #000;
    position: absolute;
    left: 0;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.colorlib-nav-toggle.dark i {
    position: relative;
    color: #000;
    background: #000;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
    background: #000;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.colorlib-nav-toggle i::before {
    top: -7px;
}

.colorlib-nav-toggle i::after {
    bottom: -7px;
}

.colorlib-nav-toggle:hover i::before {
    top: -10px;
}

.colorlib-nav-toggle:hover i::after {
    bottom: -10px;
}

.colorlib-nav-toggle.active i {
    background: transparent;
}

.colorlib-nav-toggle.active i::before {
    top: 0;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.colorlib-nav-toggle.active i::after {
    bottom: 0;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

.colorlib-nav-toggle {
    position: fixed;
    left: -5px;
    top: 0px;
    z-index: 9999;
    cursor: pointer;
    opacity: 1;
    visibility: hidden;
    padding: 15px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 768px) {
    .colorlib-nav-toggle {
        opacity: 1;
        visibility: visible;
        left: 0px;
        border: solid 1px grey;
        background: #f2f3f7;
    }
}

@media screen and (max-width: 480px) {
    .col-xxs-12 {
        float: none;
        width: 100%;
    }
}

.row-bottom-padded-lg {
    padding-bottom: 7em;
}

@media screen and (max-width: 768px) {
    .row-bottom-padded-lg {
        padding-bottom: 1em;
    }
}

.row-bottom-padded-md {
    padding-bottom: 3em;
}

@media screen and (max-width: 768px) {
    .row-bottom-padded-md {
        padding-bottom: 1em;
    }
}

.row-bottom-padded-sm {
    padding-bottom: 1em;
}

@media screen and (max-width: 768px) {
    .row-bottom-padded-sm {
        padding-bottom: 1em;
    }
}

.row-pt-md {
    padding-top: 3em;
}

.col-padding {
    padding: 10px !important;
}