/*
=====================================================================
*   MTC v1.0 Default Stylesheet
*   Based on Woo v1.0 Default Stylesheet
*      url: styleshout.com, 05-02-2014
*   Based on Spectre.css v0.5.8
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Features Section
   e. Pricing Section
   f. Screenshots Section
   g. Call To Action Section
   h. Testimonials Section
   i. Subscribe Section
   j. Footer
   k. lightbox
   l. Widgets (cards, labels, ...)
   m. Blog
   n. Donation Section
   o. Cookie Consent Section
   p. Modal

   todo: check bug in mobile z-index

===================================================================== */

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

body {
   background: #181d21;
}

.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;
}

.notices p {
   margin: 15px 0;
}

/* for css animations */
.show {
   opacity: 1;
}

.js #learn-more .feature-media {
   opacity: 0;
}

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

header {
   height: 54px;
   width: 100%;
   background: #289F15;
   border-bottom: 1px solid #157E05;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
}

/* header logo */
header .logo {
   margin-left: 36px;
   margin-right: 20px;
   margin-top: 15px;
   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: 176px;
   height: 24px;
}

/* header social */
header .header-social {
   font-size: 30px;
   font-weight: normal;
   line-height: 54px;
   color: #424a56;
   margin: 0 20px 0 0;
   padding: 0;
   float: right;
}

header .header-social li {
   display: inline-block;
   margin-right: 10px;
}

header .header-social li a {
   color: #157E05;
}

header .header-social li a:hover {
   color: #ffffff;
}

/* 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: #fff;
}

ul#nav li a:hover {
   color: #fff;
   background: #157E05;
}

ul#nav li a:active {
   background-color: transparent !important;
}

ul#nav li.current a {
   color: #fff;
}

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

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

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

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

}

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

/* Hero Text */
.hero-text {
   color: #d0d3d5;
   width: 83%;
   text-align: center;
   margin: 54px auto 24px auto;
}

.hero-text h1 {
   color: #fff;
   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-size: 24px;
   line-height: 1.5;
   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 {
   margin-right: 30px;
}

#hero .buttons .trial,
.button.trial {
   background: #f64b39;
}

#hero .buttons .trial:hover,
.button.trial:hover {
   background: #f65d4c;
}

#hero .buttons .trial:active,
.button.trial:active {
   background: #f53d2a;
}

section.section {
   padding-left: 1rem;
   padding-right: 1rem;
   position: relative;
}

.overlay-light,
.overlay-dark,
.overlay-light-gradient,
.overlay-dark-gradient {
   z-index: 0;
}

.hero {
   display: -ms-flexbox;
   display: flex;
   padding-top: 7rem;
   padding-bottom: 7rem;
   background-position: center;
   background-size: cover;
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center;
   background-position: 50% 0;
}

.hero-small {
   min-height: 300px;
}

.hero-large {
   min-height: 500px;
}

.hero #to-start {
   font-size: 4rem;
   position: absolute;
   bottom: 6rem;
   display: inline-block;
   cursor: pointer;
}

.hero-small #to-start {
   bottom: 2rem;
}

.pulse {
   animation-name: pulse_animation;
   animation-duration: 2000ms;
   transform-origin: 70% 70%;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

@keyframes pulse_animation {
   0% {
      transform: scale(1);
   }

   30% {
      transform: scale(1);
   }

   40% {
      transform: scale(1.08);
   }

   50% {
      transform: scale(1);
   }

   60% {
      transform: scale(1);
   }

   70% {
      transform: scale(1.05);
   }

   80% {
      transform: scale(1);
   }

   100% {
      transform: scale(1);
   }
}

.hero h1 {
   font-size: 8rem;
   color: #242931;
}

.hero h2 {
   font-size: 5rem;
}

.hero h2,
.hero #to-start a {
   color: rgba(36, 41, 49, .8);
}

.hero.blog .blog-date {
   margin-right: 10px;
}

.hero.text-light h1 {
   color: #fff;
}

.hero.text-light h2,
.hero.text-light #to-start a {
   color: rgba(255, 255, 255, 0.8);
}

.title-h1h2 h1 {
   font-weight: 100;
   margin-bottom: 0;
   line-height: 1.1;
}

.title-h1h2 h1 strong,
.title-h1h2 h1 bold {
   font-weight: 400;
}

.title-h1h2 h1+h2 {
   line-height: 1.1;
   margin-top: 0;
}

.title-h1h2 h1+h2,
.title-center h1+h2 {
   margin-bottom: 50px;
   font-weight: 400;
}

.image-overlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: -1;
}

.overlay-light .image-overlay {
   background: rgba(255, 255, 255, 0.4);
}

.overlay-light-gradient .image-overlay {
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
}

.overlay-dark .image-overlay {
   background: rgba(0, 0, 0, 0.4);
}

.overlay-dark-gradient .image-overlay {
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
}


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

#learn-more {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}

#learn-more .feature {
   margin-top: 30px;
   margin-bottom: 54px;
}

#learn-more .right {
   padding-left: 32px;
   float: right;
}

#learn-more .left {
   padding-right: 32px;
   float: left;
}

#learn-more h3 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}

.fluid-video-wrapper {
   margin-top: 18px;
}


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

#get-involved {
   background: #F7F7F7;
   padding-top: 107px;
   padding-bottom: 77px;
   border-top: 1px solid #F0F0F0;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

#get-involved h2 {
   font: 28px/36px 'montserrat-bold', sans-serif;
   margin-bottom: 12px;
}

#get-involved .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;
}


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

#gallery {
   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) {

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

}

/* Portfolio Content */
#gallery-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
/* ------------------------------------------------------------------ */

#financial-disclosure  {
   background: #23292F;
   padding-top: 72px;
   padding-bottom: 48px;
}

#financial-disclosure  h1 {
   font: 18px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #fff;
}

#financial-disclosure  h1 span {
   display: none;
}

#financial-disclosure  .header-col h1:before {
   font-family: 'FontAwesome';
   content: "\f0d6";
   padding-right: 18px;
   padding-top: 6px;
   font-size: 72px;
   line-height: 72px;
   text-align: center;
   float: right;
   color: #EBEEEE;
}

#get-involved .action,
#financial-disclosure  .action {
   margin-top: 18px;
}

#financial-disclosure  .action .button {
   text-align: center;
}

#financial-disclosure  h2 {
   font: 28px/36px 'montserrat-bold', sans-serif;
   color: #EBEEEE;
   margin-bottom: 12px;
}

#financial-disclosure  h2 a {
   color: inherit;
}

#financial-disclosure  p {
   color: #697B8B;
   font-size: 17px;
   padding-right: 5px;
}

#financial-disclosure  p span {
   font-family: 'opensans-semibold', sans-serif;
   color: #A9B5C0;
}


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

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

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

   #testimonials {
      background: #44B831 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: #8BE07D;
   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
/* ------------------------------------------------------------------ */

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

#volunteer a,
#volunteer a:visited {
   color: #fff;
}

#volunteer a:hover,
#volunteer a:focus {
   color: #11ABB0;
}

#volunteer h1 {
   color: #fff;
}

#volunteer p {
   color: #7A7A7A;
   text-align: center;
   padding: 0;
}

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

footer {
   padding-top: 84px;
   margin-bottom: 60px;
   color: #3c4753;
   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: 204px;
}

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 .widget {
   padding: 0 10px;
   text-align: center;
}

footer h3:before {
   font-family: 'FontAwesome';
   margin: 0 0 6px 3px;
   font-size: 30px;
   line-height: 48px;
   text-align: center;
   color: #738291;
   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: #3c4753;
}

footer ul li a:hover,
footer ul li a:focus {
   color: #fff;
}

/* copyright */
footer .copyright {
   margin: 0;
   padding: 10px 18px 0;
   clear: both;
   min-height: 28px;
}

footer .nav {
   padding: 10px 0;
   text-align: right;
}

footer .nav li {
   display: inline-block;
   padding-right: 10px;
}

footer .nav li:last-child {
   padding-right: 0;
}

/* 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: #525252;

   -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: #62d050;
}


/* ------------------------------------------------------------------ */
/* 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 */
   }

}



/* ------------------------------------------------------------------ */
/* l. Widgets (cards, labels...)
/* ------------------------------------------------------------------ */

/* Cards */
.card {
   background: #fff;
   border: 0.05rem solid #e7e9ed;
   border-radius: 0.2rem;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
}

.card .card-header,
.card .card-body,
.card .card-footer {
   padding: 1.8rem;
   padding-bottom: 0;
}

.card .card-header:last-child,
.card .card-body:last-child,
.card .card-footer:last-child {
   padding-bottom: 1.8rem;
}

.card .card-body {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
}

.card .card-image {
   padding-top: 1.8rem;
}

.card .card-image:first-child {
   padding-top: 0;
}

.card .card-image:first-child img {
   border-top-left-radius: 0.2rem;
   border-top-right-radius: 0.2rem;
}

.card .card-image:last-child img {
   border-bottom-left-radius: 0.2rem;
   border-bottom-right-radius: 0.2rem;
}

/* Labels */

.label {
   border-radius: 0.2rem;
   line-height: 1.25;
   padding: .3rem .6rem;
   background: #f0f1f4;
   color: #5b657a;
   display: inline-block;
}

.label.label-rounded {
   border-radius: 5rem;
   padding-left: .8rem;
   padding-right: .8rem;
}

.label.label-primary {
   background: #3085EE;
   color: #fff;
}

.label.label-secondary {
   background: #e1edfd;
   color: #3085EE;
}

.label.label-success {
   background: #32b643;
   color: #fff;
}

.label.label-warning {
   background: #ffb700;
   color: #fff;
}

.label.label-error {
   background: #e85600;
   color: #fff;
}

/* Buttons */

.btn {
   transition: all .2s ease;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: #fff;
   border: 0.1rem solid #0074D9;
   border-radius: 0.2rem;
   color: #0074D9;
   cursor: pointer;
   display: inline-block;
   font-size: 1.6rem;
   height: 3.6rem;
   line-height: 2.4rem;
   outline: none;
   padding: .5rem .8rem;
   text-align: center;
   text-decoration: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
}

.btn:focus {
   box-shadow: 0 0 0 0.2rem rgba(0, 116, 217, 0.2);
}

.btn:focus,
.btn:hover {
   background: #99d0ff;
   border-color: #006cca;
   text-decoration: none;
}

.btn:active,
.btn.active {
   background: #006cca;
   border-color: #005eb0;
   color: #fff;
   text-decoration: none;
}

.btn:active.loading::after,
.btn.active.loading::after {
   border-bottom-color: #fff;
   border-left-color: #fff;
}

.btn[disabled],
.btn:disabled,
.btn.disabled {
   cursor: default;
   opacity: .5;
   pointer-events: none;
}

.btn.btn-primary,
.btn-primary.button {
   background: #3085EE;
   border-color: #227ded;
   color: #fff;
}

.btn.btn-primary:focus,
.btn-primary.button:focus,
.btn.btn-primary:hover,
.btn-primary.button:hover {
   background: #1877ec;
   border-color: #1370e3;
   color: #fff;
}

.btn.btn-primary:active,
.btn-primary.button:active,
.btn.btn-primary.active,
.btn-primary.active.button {
   background: #1372e7;
   border-color: #126bd9;
   color: #fff;
}

.btn.btn-primary.loading::after,
.btn-primary.loading.button::after {
   border-bottom-color: #fff;
   border-left-color: #fff;
}

.btn.btn-success,
.btn-success.button {
   background: #32b643;
   border-color: #2faa3f;
   color: #fff;
}

.btn.btn-success:focus,
.btn-success.button:focus {
   box-shadow: 0 0 0 0.2rem rgba(50, 182, 67, 0.2);
}

.btn.btn-success:focus,
.btn-success.button:focus,
.btn.btn-success:hover,
.btn-success.button:hover {
   background: #30ae40;
   border-color: #2da23c;
   color: #fff;
}

.btn.btn-success:active,
.btn-success.button:active,
.btn.btn-success.active,
.btn-success.active.button {
   background: #2a9a39;
   border-color: #278e34;
   color: #fff;
}

.btn.btn-success.loading::after,
.btn-success.loading.button::after {
   border-bottom-color: #fff;
   border-left-color: #fff;
}

.btn.btn-error,
.btn-error.button {
   background: #e85600;
   border-color: #d95000;
   color: #fff;
}

.btn.btn-error:focus,
.btn-error.button:focus {
   box-shadow: 0 0 0 0.2rem rgba(232, 86, 0, 0.2);
}

.btn.btn-error:focus,
.btn-error.button:focus,
.btn.btn-error:hover,
.btn-error.button:hover {
   background: #de5200;
   border-color: #cf4d00;
   color: #fff;
}

.btn.btn-error:active,
.btn-error.button:active,
.btn.btn-error.active,
.btn-error.active.button {
   background: #c44900;
   border-color: #b54300;
   color: #fff;
}

.btn.btn-error.loading::after,
.btn-error.loading.button::after {
   border-bottom-color: #fff;
   border-left-color: #fff;
}

.btn.btn-link,
.btn-link.button {
   background: transparent;
   border-color: transparent;
   color: #3085EE;
}

.btn.btn-link:focus,
.btn-link.button:focus,
.btn.btn-link:hover,
.btn-link.button:hover,
.btn.btn-link:active,
.btn-link.button:active,
.btn.btn-link.active,
.btn-link.active.button {
   color: #126bd9;
}

.btn.btn-sm,
.btn-sm.button {
   font-size: 1.4rem;
   height: 2.8rem;
   padding: 0.1rem 0.6rem;
}

.btn.btn-lg,
.btn-lg.button {
   font-size: 1.8rem;
   height: 4rem;
   padding: 0.7rem 1.2rem;
}

.btn.btn-block,
.btn-block.button {
   display: block;
   width: 100%;
}

.btn.btn-action,
.btn-action.button {
   width: 3.6rem;
   padding-left: 0;
   padding-right: 0;
}

.btn.btn-action.btn-sm,
.btn-action.btn-sm.button {
   width: 2.8rem;
}

.btn.btn-action.btn-lg,
.btn-action.btn-lg.button {
   width: 4rem;
}

.btn.btn-clear,
.btn-clear.button {
   background: transparent;
   border: 0;
   color: currentColor;
   height: 2rem;
   line-height: 1.6rem;
   margin-left: 0.4rem;
   margin-right: -2px;
   opacity: 1;
   padding: 0.2rem;
   text-decoration: none;
   width: 2rem;
}

.btn.btn-clear:focus,
.btn-clear.button:focus,
.btn.btn-clear:hover,
.btn-clear.button:hover {
   background: rgba(248, 249, 250, 0.5);
   opacity: .95;
}

.btn.btn-clear::before,
.btn-clear.button::before {
   content: "\2715";
}

.btn-group {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.btn-group .btn,
.btn-group .button {
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
}

.btn-group .btn:first-child:not(:last-child),
.btn-group .button:first-child:not(:last-child) {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
}

.btn-group .btn:not(:first-child):not(:last-child),
.btn-group .button:not(:first-child):not(:last-child) {
   border-radius: 0;
   margin-left: -0.1rem;
}

.btn-group .btn:last-child:not(:first-child),
.btn-group .button:last-child:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   margin-left: -0.1rem;
}

.btn-group .btn:focus,
.btn-group .button:focus,
.btn-group .btn:hover,
.btn-group .button:hover,
.btn-group .btn:active,
.btn-group .button:active,
.btn-group .btn.active,
.btn-group .active.button {
   z-index: 1;
}

.btn-group.btn-group-block {
   display: -ms-flexbox;
   display: flex;
}

.btn-group.btn-group-block .btn,
.btn-group.btn-group-block .button {
   -ms-flex: 1 0 0px;
   flex: 1 0 0;
}

/* Breadcrumbs */

.breadcrumb {
   list-style: none;
   margin: 0.2rem 0;
   padding: 0.2rem 0;
}

.breadcrumb .breadcrumb-item {
   color: #667189;
   display: inline-block;
   margin: 0;
   padding: 0.2rem 0;
}

.breadcrumb .breadcrumb-item:not(:last-child) {
   margin-right: 0.2rem;
}

.breadcrumb .breadcrumb-item:not(:last-child) a {
   color: #667189;
}

.breadcrumb .breadcrumb-item:not(:first-child)::before {
   color: #e7e9ed;
   content: "/";
   padding-right: 0.4rem;
}

/* Language Selector */

.language-selector {
   float: right;
   position: relative;
   vertical-align: middle;
   margin: 0 18px !important;
   display: inline-block;
}

.language-selector>.btn:first-child {
   margin-left: 0;
}

.language-selector .btn {
   float: left;
   position: relative;
   display: inline-block;
   margin-bottom: 0;
   font-weight: 400;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
   /* size */
   height: 28px;
   padding: 5px 10px;
   font-size: 0.8rem;
   line-height: 1.5;
   border-radius: 3px;
   /* Aspect */
   color: #fff;
   background-color: #3c4753;
   border-color: #3c4753;
}

.language-selector .btn img {
   top: 2px;
   position: relative;
}

.language-selector .dropdown-menu {
   position: absolute;
   bottom: 100%;
   left: 0;
   z-index: 1000;
   display: none;
   float: left;
   padding: 5px 0;
   margin: 2px 0 0;
   font-size: 1rem;
   text-align: left;
   list-style: none;
   background-color: #3c4753;
   background-clip: padding-box;
   border-radius: 4px 4px 0 0;
   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.language-selector .dropdown-menu img {
   width: 24px;
   height: 12px;
   max-width: inherit;
   position: relative;
   top: 2px;
}

.language-selector .dropdown-menu li {
   line-height: 1rem;
   font-color: #c0c0c0;
   display: list-item;
   text-align: -webkit-match-parent;
}

.language-selector .dropdown-menu li:hover {
   background-color: #181d21;
}

.language-selector .dropdown-menu>li>a {
   display: block;
   padding: 3px 15px;
   clear: both;
   font-weight: 400;
   line-height: 1.42857143;
   color: #fff;
   white-space: nowrap;
}


/* ------------------------------------------------------------------ */
/* m. Blog
/* ------------------------------------------------------------------ */

/** Blog Listing **/
.blog-listing {
   padding: 8.7rem 0 72px;
   background: #fff;
}

.blog-listing .bricklayer-column {
   padding-left: 0px;
   padding-right: 25px;
}

.blog-listing .card {
   margin-bottom: 25px;
   border: 0;
   box-shadow: 0 10px 45px -9px rgba(0, 0, 0, 0.1);
}

.blog-listing .card-footer {
   text-align: right;
}

.blog-listing .blog-date {
   font-size: 13px;
}

.hero~.blog-listing {
   padding-top: 4rem;
}

/** Blog Item **/
.content-title {
   margin-bottom: 4rem;
}

.content-title h2 {
   margin-bottom: 1rem;
}

.label {
   font-size: 12px;
   text-transform: uppercase;
}

.prev-next {
   margin-top: 4rem;
}

.hero .tags {
   margin-left: 10px;
}

.hero .blog-date {
   line-height: 21px;
}

/** Breadcrumbs styling **/
#breadcrumbs {
   padding-left: 36px;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   margin-top: -2rem;
   margin-bottom: 2rem;
}

#breadcrumbs i {
   display: none;
}

#breadcrumbs span,
#breadcrumbs a {
   padding: 0 1rem;
}

#breadcrumbs span:first-child,
#breadcrumbs a:first-child {
   padding-left: 0;
}

#breadcrumbs span:not(:first-child)::before,
#breadcrumbs a:not(:first-child)::before {
   color: #e7e9ed;
   content: "/";
   padding-right: 2rem;
}

/** Sidebar specific tweaks **/
#sidebar ul.related-pages {
   box-shadow: none;
   padding: 0;
   z-index: 1;
}

#sidebar ul.related-pages li {
   border-bottom: 1px solid #e7e9ed;
}

#sidebar ul.related-pages li:last-child {
   border-bottom: 0;
}

#sidebar ul.archives {
   list-style: none;
   margin-left: 0;
}

#sidebar ul.archives .label {
   vertical-align: text-top;
}

.search-input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: #fff;
   background-image: none;
   border: 0.1rem solid #caced7;
   border-radius: 0.2rem;
   color: #50596c;
   display: block;
   font-size: 1.6rem;
   height: 3.6rem;
   line-height: 2.4rem;
   max-width: 100%;
   outline: none;
   padding: 0.5rem 0.8rem;
   position: relative;
   transition: background .2s, border .2s, box-shadow .2s, color .2s;
   width: 100%;
}

/** Sidebar archives plus */
.archive-plus,
.archive-plus ul,
#sidebar .sidebar-content .archive-plus ul {
   padding: 0;
   list-style: none;
}

.archive-plus .active {
   color: #7d889f;
}

.archive-plus .label {
   display: inline-block;
   visibility: hidden;
   position: relative;
   top: -2px;
   height: 20px;
   color: #8e95ac;
   border-bottom: 1px #c6c9d5 solid;
   text-transform: lowercase;
}

.archive-plus a:hover .label {
   visibility: visible;
}

.archive-plus ul {
   margin-left: 1rem;
}

.archive-plus label~ul.last {
   margin-left: 2em;
   margin-left: 2rem;
}

.archive-plus ul label.arrows~ul {
   margin-left: 1.25em;
   margin-left: 1.25rem;
}

.archive-plus input,
.archive-plus li ul {
   display: none;
}

.archive-plus label {
   cursor: pointer;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   -o-user-select: none;
   user-select: none;

   display: inline-block;
   line-height: 1rem;
   margin-right: 1.5rem;
   vertical-align: middle;
}

.archive-plus label:after {
   color: #3085ee;
   font-size: small;
   left: 100%;
   position: absolute;
   margin-left: .5rem;
   top: -7px;
}

.archive-plus label:hover:after {
   color: #126bd9;
}

.archive-plus li:hover>input~label:after,
.archive-plus label:after {
   font-family: "FontAwesome";
   font-weight: bold;
   content: "\f114";
}

.archive-plus li:hover>input:checked~label:after,
.archive-plus li>input:checked~label:after {
   font-family: "FontAwesome";
   font-weight: bold;
   content: "\f115";
}

.archive-plus label.counter:after {
   content: "";
}

.archive-plus input:checked~ul {
   display: block;
}

.archive-plus a {
   text-decoration: none;
}

.archive-plus a:hover span:not(.label) {
   text-decoration: underline;
}

.archive-plus.last a:before,
.archive-plus ul.last a:before {
   font-family: "FontAwesome";
   font-weight: bold;
   content: "\f016";
   font-size: small;
   margin-right: .35em;
   margin-right: .35rem;
   display: inline-block;
}

/* ------------------------------------------------------------------ */
/* n. Donation Section
/* ------------------------------------------------------------------ */

#donation {
   padding-top: 96px;
   padding-bottom: 66px;
   overflow: hidden;
   text-align: center;
}

#donation a,
#donation a:visited {
   color: #fff;
}

#donation a:hover,
#donation a:focus {
   color: #11ABB0;
}

#donation h2 {
   color: #EBEEEE;
   margin-bottom: 12px;
   font: 28px/36px 'montserrat-bold', sans-serif;
}

#donation p {
   color: #697B8B;
   font-size: 16pt;
   line-height: 20pt;
   padding: 0;
}

#donation .notices p {
   text-align: left !important;
   font-size: 12pt;
   line-height: 15pt;
}


/* ------------------------------------------------------------------ */
/* o. Cookie Consent Section
/* ------------------------------------------------------------------ */

.cc-window {
   border-radius: 3px;
}

.invert-cc .cc-window {
   color: #50596c !important;
   background-color: #dddddd !important;
}

.invert-cc .cc-link {
   color: #50596c !important;
}

.invert-cc .cc-link:hover {
   color: #373d4a !important;
}


/* ------------------------------------------------------------------ */
/* p. Modal
/* ------------------------------------------------------------------ */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999999;
}

.modal .container {
  width: 30%;
  min-width: 300px;
  background: rgba(255, 255, 255, .95);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .97);
  margin-top: 20px;
}

.modal .container .title {
 font-size: 1.5em;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 5px;
 border-bottom: 2px solid #ccc;
}

.modal .container .content {
  overflow-y: auto;
  padding: 0 10px 10px 10px; 
}

.modal .container .content ul {
  list-style: none;
}

.modal .container .content ul li a {
  width: 100%;
  padding: 5px;
  display: block;
  text-align: center;
}


.modal .container .content .toolbar button {
  padding: .4em .8em;
  font-size: .9em;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  text-align: center;
  white-space: nowrap;
  color: rgb(255, 255, 255);
  border-color: rgb(68, 184, 49);
  background-color: rgb(68, 184, 49);  
}

.modal .container .content .toolbar button:hover {
  background-color: rgb(106, 222, 87);
  text-decoration: underline;
}