/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

body { background: #003366; }

.section-head {
    padding: 0 4%;
    text-align: center;
}
.section-head h1 {
    font: 20px/36px 'montserrat-bold', sans-serif;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
    opacity: 0;
}


/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
    height: 54px;
    width: 100%;
    background: #003366;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 990;
}

/* header logo */
header .logo {
    margin-left: 36px;
    margin-right: 20px;
    margin-top: 13px;
    float: left;
    width: auto;
    z-index: 991;

    /* add position relative since z-index only applies to
    elements that have been given an explicit position */
    position: relative;
}
header .logo a {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    width: 64px;
    height: 18px;
}

/* header social */
header .header-social {
    font-size: 20px;
    font-weight: normal;
    line-height: 54px;
    color: #424a56;
    margin: 0 10px 0 0;
    padding: 0;
    float: right;
}
header .header-social li {
    display: inline-block;
    margin-right: 20px;
}
header .header-social li a { color: #fff; }
header .header-social li a:hover { color: #11ABB0; }

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* nav-wrap */
#nav-wrap {
    font: 11px 'montserrat-regular', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    float: left;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
    min-height: 54px;
    width: auto;

    /* left align the menu */
    text-align: left;
}
ul#nav li {
    position: relative;
    list-style: none;
    height: 54px;
    display: inline-block;

}

/* Links */
ul#nav li a {

    /* 8px padding top + 8px padding bottom + 38px line-height = 54px */
    display: inline-block;
    padding: 8px 8px;
    line-height: 38px;
    text-decoration: none;
    text-align: left;
    color: #58687A;

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
ul#nav li a:hover { color: #fff; }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }


/* ------------------------------------------------------------------ */
/* c. Hero Section
/* ------------------------------------------------------------------ */

#hero {
    padding-top: 66px;
    background: #CCCCCC url(img/hero-bg.png);
    overflow: hidden;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    #hero {
        background: #CCCCCC url(img/hero-bg_@2X.png);
        background-size: 200px 200px;
    }

}

#hero .row { max-width: 1040px; }

/* Hero Text */
.hero-text {
    color: #676e73;
    width: 83%;
    text-align: center;
    margin: 54px auto 24px auto;
}
.hero-text h1 {
    font: 40px/1.2em 'montserrat-regular', sans-serif;
    color: #000000;
    padding: 0;
    margin: 0;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.hero-text h1 span,
.hero-text a { color: #11ABB0; }
.hero-text p {
    font: 16px/30px 'opensans-regular', sans-serif;
    padding: 0;
    margin: 12px 8% 0;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

/* Hero Image */
.hero-image {
    width: 100%;
    margin: 0 auto;
}
.hero-image img {
    vertical-align: bottom;
    display: block;
}

/* Hero CTA Buttons */
#hero .buttons {
    text-align: center;
    margin: 0 0 18px 0;
}
#hero .buttons .button {
    font: 14px/24px 'montserrat-bold', sans-serif;
    text-transform : uppercase;
    letter-spacing: 2px;
}
#hero .buttons .trial {
    background: #007FFF;
    margin-right: 30px;

    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -ms-animation-delay: 10s;
    -o-animation-delay: 10s;
    -webkit-animation-iteration-count: 3;
    -moz-animation-iteration-count: 3;
}
#hero .buttons .trial:hover { background: #4CA6FF; }
#hero .buttons .learn-more {}


/* ------------------------------------------------------------------ */
/* d. Features Section
/* ------------------------------------------------------------------ */

#features {
    background: #fff;
    padding-top: 96px;
    padding-bottom: 20px;
    overflow: hidden;
}
#features .feature {
    margin-top: 30px;
    margin-bottom: 54px;
}
#features .right {
    padding-left: 32px;
    float: right;
}
#features .left {
    padding-right: 32px;
    float: left;
}
#features h3 {
    font: 16px/24px 'montserrat-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #222;
}
.fluid-video-wrapper { margin-top: 18px; }

/*----------------------------------------------*/
/*	e. Plans per Section
/*----------------------------------------------*/

.plan-info-block {
    background: #F7F7F7;
    padding-top: 107px;
    padding-bottom: 77px;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    text-align: center;
}
.plan-info-block .price-block {
    background: #fff;
    border: 1px solid #E6E6E6;
    text-align: center;
    margin-bottom: 36px;
}

.plan-info-block dl {
  width: 80%;
  margin: 0 auto;
}

.plan-info-block .plan-sign-up {
  white-space: pre-line;
}

.plan-info-block .up {
  font: 13px/24px 'montserrat-bold', sans-serif;
}

.plan-info-block .up:hover {
    color: #14D0D6;
}

.plan-info-block .button {
  width: 80%;
}

.plan-info-block dd {
  /*text-align: justify;*/
}

.plan-info-block hr {
  margin: 0 auto;
  margin-bottom: 20px;
  width: 80%;
}

#personalPlan {
    background: #F7F7F7;
    padding-top: 107px;
    padding-bottom: 77px;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    text-align: center;
}
#personalPlan .price-block {
    background: #fff;
    border: 1px solid #E6E6E6;
    text-align: center;
    margin-bottom: 36px;
}

#startupPlan {
    background: #F7F7F7;
    padding-top: 107px;
    padding-bottom: 77px;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    text-align: center;
}
#startupPlan .price-block {
    background: #fff;
    border: 1px solid #E6E6E6;
    text-align: center;
    margin-bottom: 36px;
}

#smallBusinessPlan {
    background: #F7F7F7;
    padding-top: 107px;
    padding-bottom: 77px;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    text-align: center;
}
#smallBusinessPlan .price-block {
    background: #fff;
    border: 1px solid #E6E6E6;
    text-align: center;
    margin-bottom: 36px;
}

/*----------------------------------------------*/
/*	e. Pricing Section
/*----------------------------------------------*/

#pricing {
    background: #F7F7F7;
    padding-top: 107px;
    padding-bottom: 77px;
    border-top: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    text-align: center;
}
#pricing .price-block {
    background: #fff;
    border: 1px solid #E6E6E6;
    text-align: center;
    margin-bottom: 36px;
}
.plan-title {
    font: 15px/30px 'montserrat-regular', sans-serif;
    padding: 30px 20px 6px 20px;
    margin-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.plan-title .fa {
    display: block;
    margin-bottom: 6px;
    font-size: 26px;
}
.plan-price {
    font-family: 'montserrat-bold', sans-serif;
    font-size: 30px;
    color: #333;
    padding: 6px 30px 6px 30px;
    margin-bottom: 0;
    text-align: center;
    letter-spacing: .5px;
}
.plan-price span {
    font-family: 'opensans-light', sans-serif;
    font-size: 15px;
    color: #999;
    display: block;
    margin-top: 0;
}

ul.features {
    margin: 12px 0 0 0;
    list-style: none;
}
ul.features li {
    line-height: 39px;
    margin-bottom: 0;
}
ul.features li:nth-child(odd) { }
ul.features li:nth-child(even) { }

.plan-sign-up {
    padding: 24px 15px;
    margin: 0;
    text-align: center;
}
.plan-sign-up .button {
    font: 13px/24px 'montserrat-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #f64b39;
}

.plan-sign-up .button:hover {
    background: #F86A5A;
}
.info {
    font: 13px/24px 'montserrat-bold', sans-serif;
    text-transform: uppercase;
    /*text-decoration: underline;
    letter-spacing: 2px;
    background: #11ABB0;*/
}

.info:hover {
    color: #14D0D6;
}

/* ------------------------------------------------------------------ */
/* c. Screenshots
/* ------------------------------------------------------------------ */

#documentation {
    background: #fff url(img/grey.png);
    padding-top: 96px;
    padding-bottom: 120px;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    #documenation {
        background: #fff url(img/grey_@2X.png);
        background-size: 397px 322px;
    }

}

/* Portfolio Content */
#documentation-wrapper .columns { padding: 0; }
.item .item-wrap {
    background: #fff;
    overflow: hidden;
    position: relative;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.item .item-wrap a {
    display: block;
    cursor: pointer;
}

/* overlay */
.item .item-wrap .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);

    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;

    background: url(img/overlay-bg.png) repeat;
}
.item .item-wrap .link-icon {
    display: block;
    color: #fff;
    height: 30px;
    width: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;

    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);

    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
}
.item .item-wrap img {
    vertical-align: bottom;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* on hover */
.item:hover .overlay {
    opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}
.item:hover .link-icon {
    opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}
.item:hover .item-wrap img {
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}


/* ------------------------------------------------------------------ */
/* g. Call To Action Section
/* ------------------------------------------------------------------ */

#call-to-action {
    background: #23292F;
    padding-top: 72px;
    padding-bottom: 48px;
}
#call-to-action h1 {
    font: 18px/24px 'montserrat-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
}
#call-to-action h1 span { display: none; }
#call-to-action .header-col h1:before {
    font-family: 'FontAwesome';
    content: "\f093";
    padding-right: 18px;
    padding-top: 6px;
    font-size: 72px;
    line-height: 72px;
    text-align: center;
    float: right;
    color: #EBEEEE;
}
#call-to-action .action { margin-top: 18px; }
#call-to-action .action .button { text-align: center; }
#call-to-action h2 {
    font: 28px/36px 'montserrat-bold', sans-serif;
    color: #EBEEEE;
    margin-bottom: 12px;
}
#call-to-action h2 a {
    color: inherit;
}
#call-to-action p {
    color: #697B8B;
    font-size: 17px;
    padding-right: 5px;
}
#call-to-action p span {
    font-family: 'opensans-semibold', sans-serif;
    color: #A9B5C0;
}


/* ------------------------------------------------------------------
/* h. Testimonials
/* ------------------------------------------------------------------ */

#testimonials {
    background: #10999E url(img/escheresque.png);
    padding-top: 112px;
    padding-bottom: 66px;
    position: relative;
    min-height: 198px;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    #testimonials {
        background: #10999E url(img/escheresque_@2X.png);
        background-size: 46px 29px;
    }

}

#testimonials .quote-left,
#testimonials .quote-right {
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 40px;
    margin-top: -25px;
}
#testimonials .quote-left { left: 5%; }
#testimonials .quote-right { right: 5%; }

#testimonials .text-container {
    width: 86%;
    margin: 0 auto;
}
#testimonials h1 {
    font: 16px/24px 'montserrat-bold', sans-serif;
    color: #6AECF0;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 36px;
}

/*	Blockquotes */
#testimonials blockquote {
    margin: 0 0px 30px 0px;
    padding-left: 0;
    position: relative;
}
#testimonials blockquote:before { content: none; }
#testimonials blockquote p {
    font-family: 'opensans-semibold', sans-serif;
    font-style: normal;
    color: #fff;
    padding: 0;
    font-size: 26px;
    line-height: 42px;
}
#testimonials blockquote cite {
    display: block;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    color: #fff;
}
#testimonials blockquote cite:before { content: "\2014 \0020"; }
#testimonials blockquote cite a,
#testimonials blockquote cite a:visited { color: #8B9798; border: none }

/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; padding: 0;}

/* Necessary Styles */
.flexslider {
    position: relative;
    zoom: 1;
    margin: 0;
    padding: 0;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }

/* Clearfix for .slides */
.slides:before,
.slides:after {
    content: " ";
    display: table;
}
.slides:after {
    clear: both;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block; }

/* Slider Styles */
.slides { zoom: 1; }
.slides > li {
    /*margin-right: 5px; */
    overflow: hidden;
}

/* Control Nav */
.flex-control-nav {
    width: 100%;
    text-align: center;
}
.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.flex-control-paging li a {
    width: 12px;
    height: 12px;
    display: block;
    background: #ddd;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    text-indent: -9999px;
    border-radius: 20px;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, .3);
}
.flex-control-paging li a:hover {
    background: #CCC;
    background: rgba(255, 255, 255, .7);
}
.flex-control-paging li a.flex-active {
    background: #fff;
    background: rgba(255, 255, 255, .9);
    cursor: default;
}


/* ------------------------------------------------------------------ */
/* i. Subscribe Section
/* ------------------------------------------------------------------ */

#subscribe {
    background: #23292F;
    padding-top: 96px;
    padding-bottom: 66px;
    overflow: hidden;
    text-align: center;
}

#subscribe a, #subscribe a:visited  { color: #fff; }
#subscribe a:hover, #subscribe a:focus { color: #11ABB0; }

#subscribe h1 { color: #fff; }
#subscribe p {
    color: #7A7A7A;
    text-align: center;
    padding: 0;
}

/* mailchimp signup form */
#mc_embed_signup {
    background: none;
    clear: both;
    display: block;
    margin: 6px auto 30px auto;
    width: 70%;
    text-align: center;
}
#mc_embed_signup:before,
#mc_embed_signup:after {
    content: " ";
    display: table;
}
#mc_embed_signup:after {
    clear: both;
}
#mc_embed_signup input[type="submit"] {
    float: right;
    height: 60px;
    margin: 0;
    padding: 0 20px;
    font-size: 16px;
    line-height: 60px;
    width: 47%;
}
#mc_embed_signup input[type="email"] {
    display: inline;
    float: left;
    height: 60px;
    margin: 0;
    padding: 18px 20px;
    font-size: 18px;
    line-height: 24px;
    font-family: 'montserrat-regular',sans-serif;
    width: 47%;
    text-align: center;
}


/* ------------------------------------------------------------------ */
/* j. Footer
/* ------------------------------------------------------------------ */

footer {
    padding-top: 84px;
    margin-bottom: 60px;
    
    font-size: 13px;
    line-height: 24px;
    position: relative;
}

footer a, footer a:visited { color: #0A6567; }
footer a:hover, footer a:focus { color: #fff; }

footer .info { padding-right: 90px; }

footer .footer-logo a {
    display: block;
    margin-bottom: 12px;
    margin-top: 12px;
    margin-left: 3px;
}
footer .footer-logo a img {
    height: 24px;
    width: 92px;
}

footer .right-cols .columns {
    padding-right: 5px;
    padding-left: 5px;
    width: 33.33333%; ;
}
footer .right-cols .columns p { margin-bottom: 6px; }

footer h3 {
    font: 13px/24px 'opensans-semibold', sans-serif;
    margin-bottom: 0;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
footer h3:before {
    font-family: 'FontAwesome';
    margin: 0 0 6px 3px;
    font-size: 30px;
    line-height: 48px;
    text-align: left;
    display: block;
}
footer h3.address:before { content: "\f041"; }
footer h3.social:before { content: "\f0c0"; }
footer h3.contact:before { content: "\f0e0"; }

footer ul {
    margin: 0;
    padding: 0;
}
footer ul li {
    margin: 0;
    line-height: 24px;
}
footer ul li a,
footer ul li a:visited { color: #838C95; }
footer ul li a:hover,
footer ul li a:focus { color: #fff; }

/* copyright */
footer .copyright {
    margin: 0;
    padding: 0 18px;
    clear: both;
}

/* Go To Top Button */
#go-top {
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -30px;
    text-align: center;
    z-index: 889;
}
#go-top a {
    text-decoration: none;
    border: 0 none;
    display: block;
    width: 60px;
    height: 60px;
    background: #26537F;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

    color: #fff;
    font-size: 21px;
    line-height: 60px;
    border-radius: 100%;
}
#go-top a:hover { background: #007FFF; }


/* ------------------------------------------------------------------ */
/* k. lightbox
/* ------------------------------------------------------------------ */

#imagelightbox {
    cursor: pointer;
    position: fixed;
    z-index: 995;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
    -moz-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
    box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
}

/* activity indication */
#imagelightbox-loading,
#imagelightbox-loading div { border-radius: 50%; }
#imagelightbox-loading {
    width: 2.5em; /* 40 */
    height: 2.5em; /* 40 */
    background-color: #444;
    background-color: rgba( 0, 0, 0, .5 );
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    padding: 0.625em; /* 10 */
    margin: -1.25em 0 0 -1.25em; /* 20 */
    -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
    -moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
    box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
}
#imagelightbox-loading div {
    width: 1.25em; /* 20 */
    height: 1.25em; /* 20 */
    background-color: #fff;

    -webkit-animation: imagelightbox-loading .5s ease infinite;
    -moz-animation: imagelightbox-loading .5s ease infinite;
    -o-animation: imagelightbox-loading .5s ease infinite;
    animation: imagelightbox-loading .5s ease infinite;
}

@-webkit-keyframes imagelightbox-loading {
    from { opacity: .5; -webkit-transform: scale( .75 ); }
    50% { opacity: 1; -webkit-transform: scale( 1 ); }
    to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@-moz-keyframes imagelightbox-loading {
    from { opacity: .5; -moz-transform: scale( .75 ); }
    50% { opacity: 1; -moz-transform: scale( 1 ); }
    to { opacity: .5; -moz-transform: scale( .75 ); }
}
@-o-keyframes imagelightbox-loading {
    from { opacity: .5; -o-transform: scale( .75 ); }
    50% { opacity: 1; -o-transform: scale( 1 ); }
    to { opacity: .5; -o-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading {
    from { opacity: .5; transform: scale( .75 ); }
    50% { opacity: 1; transform: scale( 1 ); }
    to { opacity: .5; transform: scale( .75 ); }
}

/* lightbox overlay */
#imagelightbox-overlay {
    background-color: #383838;
    background-color: rgba( 0, 0, 0, .8 );
    position: fixed;
    z-index: 994;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* close button */
#imagelightbox-close {
    position: fixed;
    z-index: 999;
    top: 2.5em; /* 40 */
    right: 2.5em; /* 40 */
}

#imagelightbox-close i {
    display: block;
    background: #fff;
    padding: 10px;
    border-radius: 100%;

    -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
    -moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
    box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
}
a#imagelightbox-close { color: #333; }
a#imagelightbox-close:hover, a#imagelightbox-close:focus { color: #11ABB0; }

/* lightbox caption */
#imagelightbox-caption {
    text-align: center;
    color: #fff;
    background-color: #000;
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.625em; /* 10 */
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption {
    -webkit-animation: fade-in .25s linear;
    -moz-animation: fade-in .25s linear;
    -o-animation: fade-in .25s linear;
    animation: fade-in .25s linear;
}

@-webkit-keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-moz-keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-o-keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media only screen and (max-width: 41.250em) { /* 660 */

    #container	{ width: 100%; }
    #imagelightbox-close	{
        top: 1.25em; /* 20 */
        right: 1.25em; /* 20 */
    }

}