/*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Examples Section
   e. Pricing Section
   f. Activities Section
   g. Call To Action Section
   h. Testimonials Section
   i. Subscribe Section
   j. Footer
   k. lightbox
   l. Open tasks

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

.section-head-justify {
   padding: 0 4%;
   text-align: justify;
   hyphens: auto;
}

.section-head-justify h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   text-align: center;
   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: #13171B;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
}

/* header logo */
header .logo {
   margin-left: 36px;
   margin-right: 20px;
   margin-top: 5px;
   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: #aab4c0;

   -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: #112233;
   overflow: hidden;
}


#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: #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: 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 .showcase {
   background: #f64b39;
   margin-right: 30px;
}

#hero .buttons .showcase:hover {
   background: #F86A5A;
}

#hero .buttons .trial {
   background: #f64b39;
   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: #F86A5A;
}

#hero .buttons .learn-more {}


/* ------------------------------------------------------------------ */
/* d. Examples Section
/* ------------------------------------------------------------------ */

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

#examples .example {
   margin-top: 30px;
   margin-bottom: 54px;
}

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

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

#examples h2 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #F00;
}

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

#examples img {
   display: inline-block;
   position: relative;
   border: 1px solid #ccc;
   padding: 5px;
   background: #f2f2f2;
   margin-bottom: 30px;
   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
}

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



/* ------------------------------------------------------------------ */
/* d. Counters Section
/* ------------------------------------------------------------------ */


#counters {
   background: #112233;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}

#counters .welcome-image {
   max-height: 500px;
   /* Ensure it takes full width of its container */
   text-align: center;
   overflow: hidden;
   /* Prevent content overflow */
   margin: 0 auto;
}

#counters .welcome-image img {
   max-width: 100%;
   max-height: 500px;
   display: block;
   margin: 0 auto;
   object-fit: contain;
}

#counters .example {
   margin-top: 30px;
   margin-bottom: 54px;
}

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

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

#counters h2 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #F00;
}

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

#counters .image-center {
   text-align: center;
   height: inherit;
   float: none;
}

#counters .counter-pulse img {
   display: inline-block;
   position: relative;
   border: 0;
   padding: 5px;
   margin-bottom: 30px;
   animation: fadeInUp 1s, pulsate2 3s ease-in-out infinite;
   height: 25vh;
}

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

   50% {
      transform: scale(1.1);
      /* Increased from 1.05 to 1.1 for stronger pulsation */
   }

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

#counters .zweck img {
   float: right;
   background: #00000000;
   margin-bottom: 30px;
   -webkit-box-shadow: 0 0 5px rgb(255, 255, 255);
   -moz-box-shadow: 0 0 5px rgb(255, 255, 255);
   box-shadow: 0 0 5px rgb(255, 255, 255);
}


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



/* ------------------------------------------------------------------ */
/* d. Projects Section
/* ------------------------------------------------------------------ */

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

#projects .project {
   margin-top: 30px;
   margin-bottom: 54px;
}

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

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

#projects h2 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #F00;
}

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

#projects img {
   display: inline-block;
   position: relative;
   border: 1px solid #ccc;
   padding: 5px;
   background: #f2f2f2;
   margin-bottom: 30px;
   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
}

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


/* ------------------------------------------------------------------ */
/* d. supports Section
/* ------------------------------------------------------------------ */

#supports {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
   color: #123;
}

#supports .support {
   margin-top: 30px;
   margin-bottom: 54px;
}

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

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

#supports h2 {
   font: 24px 'montserrat-bold', sans-serif;
   color: #ff9151;
}

#supports h3 {
   font: 24px 'montserrat-bold', sans-serif;
   color: #ff9151;
}

#supports img {
   display: inline-block;
   position: relative;
   margin-bottom: 0px;

}

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


/* ------------------------------------------------------------------ */
/* d. jobs Section
/* ------------------------------------------------------------------ */

#jobs {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
   color: #123;
}

#jobs .job {
   margin-top: 30px;
   margin-bottom: 54px;
}

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

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

#jobs h1 {
   font: 20px/30px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #123;
}

#jobs h2 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #ff9151;
}

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

#jobs img {
   display: inline-block;
   position: relative;
   margin-bottom: 30px;
}

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



/* ------------------------------------------------------------------ */
/* d. Overview Section
/* ------------------------------------------------------------------ */

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

#overview .overview {
   margin-top: 30px;
   margin-bottom: 54px;
}

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

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

#overview h2 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #F00;
}

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

#overview img {
   display: inline-block;
   position: relative;
   /*border: 1px solid #ccc;
padding: 5px;
background: #f2f2f2;
margin-bottom: 30px;
-webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
-moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
box-shadow: 0 28px 16px -26px rgba(0, 0, 0);*/
}

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



/* ------------------------------------------------------------------ */
/* d. description Section
/* ------------------------------------------------------------------ */

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

#description .description {
   margin-top: 20px;
   margin-bottom: 20px;
}

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

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

#description h2 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #F00;
}

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

#description li {
   line-height: 30px;
}

#description img {
   display: inline-block;
   position: relative;
   border: 1px solid #ccc;
   padding: 5px;
   background: #f2f2f2;
   margin-bottom: 30px;
   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
}

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


/* ------------------------------------------------------------------ */
/* d. News Section
/* ------------------------------------------------------------------ */

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

#news .new {
   position: relative;
   border: 7px #fff solid;
   padding: 12px;
   background: #fff;
   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   box-shadow: 0px 0px 20px -10px rgb(0, 0, 0);
   line-height: normal;
   text-align: justify;
   max-width: 800px;
   margin: 20px;
}

#news h2 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #112233;
}

#news h3 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   letter-spacing: 1px;
   color: #112233;
   text-align: left;
}

#news label {
   font: 10px/16px 'montserrat', sans-serif;
   letter-spacing: 1px;
   color: #112233;
   text-align: center;
   display: inline;
}

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



/* ------------------------------------------------------------------ */
/* d. Letter
/* ------------------------------------------------------------------ */

#letter {
   background: #c2c2c6;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}

#letter .let {
   position: relative;
   border: 7px #fff solid;
   padding: 12px;
   background: #f0f0f0;
   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   box-shadow: 0px 0px 20px -10px rgb(0, 0, 0);
   line-height: normal;
   text-align: justify;
   max-width: 300px;
   margin: 20px;
}

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

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

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



/*----------------------------------------------*/
/*	e. Institute Section
/*----------------------------------------------*/

#institute {
   background: #112233;
   padding-top: 107px;
   padding-bottom: 77px;
   border-top: 1px solid #F0F0F0;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
   color: #ffffff;
}

#institute .price-block {
   background: #fff;
   border: 1px solid #E6E6E6;
   text-align: left;
   padding: 10px;
   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: 20px;
   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: 13px;
   color: #999;
   display: block;
   margin-top: 0;
}

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



ul.points {
   margin: 12px;
   list-style: none;
   text-align: justify;
   hyphens: auto;
   color: #112233;
}

ul.points li {
   line-height: 24px;
   margin-bottom: 12px;
}

ul.points li:nth-child(odd) {}

ul.points li:nth-child(even) {}


/* ------------------------------------------------------------------ */
/* c. Activites
/* ------------------------------------------------------------------ */

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

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

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

}

/* Portfolio Content */
#activities-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);
}*/

.profile-pic {
   opacity: 0;
   position: absolute;
   width: 130px;
   height: 195px;
   margin: 50px;
}

.profile-pic:hover {
   opacity: 1;
}

.profile-pic-two {
   position: absolute;
   width: 130px;
   height: 195px;
   margin: 50px;
}



/* ------------------------------------------------------------------ */
/* c. Team
/* ------------------------------------------------------------------ */

#team {
   background: #FFF;
   padding-top: 96px;
   padding-bottom: 120px;
   min-height: 800px;
}

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

   #team {
      background: #FFF;
      background-size: 397px 322px;
   }

}

/* Portfolio Content */
#team-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;
}

.item .item-wrap .link-icon {
   display: block;
   color: #112233;
   height: 100%;
   width: 100%;
   top: 80%;
   left: 0%;
   font-size: 12px;
   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;
}

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


/*----------------------------------------------*/
/*	ii. Contact Section
/*----------------------------------------------*/

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

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

   #contact {
      background: #C3CCD5;
   }

}

#contact .button {
   background: #f64b39;
}

#contact .button:hover {
   background: #F86A5A;
}


/*----------------------------------------------*/
/*	iii. Thank you Section
/*----------------------------------------------*/

#thanks {
   background: #FFD480 url(img/yellow-bg.png);
   padding-top: 107px;
   padding-bottom: 500px;
   border-top: 1px solid #F0F0F0;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

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

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

}


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

footer {
   padding-top: 84px;
   margin-bottom: 60px;
   color: #3c4753;
   font-size: 13px;
   line-height: 24px;
   position: relative;
   text-align: center;
}

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

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

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

footer .footer-logo a {
   margin-bottom: 12px;
   margin-top: 12px;
   margin-left: 3px;
}

footer .footer-logo a img {
   height: 30px;
   width: auto;
}

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;
   color: #738291;
   display: block;
}

footer h3.address:before {
   content: "\f041";
}

footer h3.social:before {
   content: "\f0c0";
}

footer h3.contact:before {
   content: "\f0e0";
}

footer h3.imprint:before {
   content: "\f040";
}

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: 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: #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: #0F9095;
}


/* ------------------------------------------------------------------ */
/* 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 */
   height: 0px;
}

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

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

   50% {
      transform: scale(1.05);
   }

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

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

   #container {
      width: 100%;
   }

   #imagelightbox-close {
      top: 1.25em;
      /* 20 */
      right: 1.25em;
      /* 20 */
   }

}


/* ------------------------------------------------------------------ */
/* l. Open tasks
/* ------------------------------------------------------------------ */

.open-tasks-section {
   display: none;
   padding: 1rem;
   background-color: #ddd;
   padding-top: 10px;
   padding-bottom: 77px;
}

.section-header {
   text-align: center;
   margin-bottom: 1rem;
   position: relative;
}

.open-tasks-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: center;
}

.task-card {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 1rem;
   max-width: 350px;
   transition: transform 0.3s ease;
   cursor: pointer;
   margin: 15px;
}

.task-card:hover {
   transform: translateY(-5px);
}

.task-content {
   text-align: justify;
   line-height: 1.15;
}

.task-title {
   font-size: 2rem;
   margin-bottom: 0.5rem;
   text-align: left;
   line-height: 1.5;
   color: #112233;
}

.task-id {
   font-size: 11px;
   font-weight: bold;
   color: #112233;
   /* Green color */
   margin-bottom: 5px;
   text-align: center;
}

.task-project {
   background: #ff9151;
   border-radius: 4px;
   padding: 0.5rem;
   margin: 0.0rem;
   display: inline-block;
   font-size: 16px;
   font-weight: bold;
   color: #fff;
   /* Blue color */
   margin-bottom: 10px;
}

.task-duration,
.task-description,
.task-deliverable,
.task-skills,
.task-last-person {
   margin-bottom: 0.5rem;
}

.task-description {
   font-weight: normal;
   color: #112233;
   line-height: 1.5;
   text-align: justify;
}

.skills-list {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
}

.skill-item {
   background: #abd5ff;
   border-radius: 4px;
   padding: 0.5rem;
   margin: 0.25rem;
   margin-bottom: 0.5rem;
   display: inline-block;
   color: #777;
}

.deliverable-list {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
}

.deliverable-item {
   background: #fff4a8;
   border-radius: 4px;
   padding: 0.5rem;
   margin: 0.25rem;
   margin-bottom: 0.5rem;
   display: inline-block;
   color: #777;
}

.description-preview {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   /* Number of lines to show */
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

.popup {
   display: none;
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
   background-color: #fff;
   margin: 15% auto;
   padding: 20px;
   border: 1px solid #888;
   width: 80%;
   max-width: 600px;
   max-height: 80%;
   /* Add this line to set the maximum height */
   overflow-y: auto;
   /* Add this line to enable vertical scrolling */
   border-radius: 8px;
   position: relative;
}

.close {
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
   cursor: pointer;
}

.close:hover,
.close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
}




/* ------------------------------------------------------------------ */
/* l. Projects - Milestones
/* ------------------------------------------------------------------ */
.projects-milestones-section {
   padding: 1rem;
   background-color: #ddd;
   padding-top: 107px;
   padding-bottom: 77px;
}

.section-description {
   display: none;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: space-evenly;
   width: calc(100% - 100px);
   left: 50px;
   position: relative;
}

.section-subtitle {
   display: inline-block;
   background-color: #fff0;
   color: #112233;
   padding: 0.5rem 1rem;
   border-radius: 0px;
   /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   top: 100%;
   /* Position it below the h1 */
   margin-top: 1rem;
   /* Adjust the spacing as needed */
   max-width: 700px;
   margin-bottom: 50px;
}

.project-card {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 1rem;
   /* transition: transform 0.3s ease; */
   /* cursor: pointer; */
   margin: 15px;
   display: initial;
   flex-direction: column;
   width: calc(20% - 40px);
   max-height: 500px;
   overflow: scroll;
}

@media (max-width: 1600px) {
   .project-card {
      width: calc(33% - 40px);
      margin: 15px 0;
      /* Adjust margin for better spacing on mobile */
   }
}

@media (max-width: 1000px) {
   .project-card {
      width: calc(50% - 40px);
      margin: 15px 0;
      /* Adjust margin for better spacing on mobile */
   }
}

@media (max-width: 700px) {
   .project-card {
      width: 100%;
      margin: 15px 0;
      /* Adjust margin for better spacing on mobile */
   }
}


/* .project-card:hover {
   transform: translateY(-5px);
} */

.project-title {
   font-size: 2rem;
   margin-bottom: 0.5rem;
   text-align: left;
   line-height: 1.5;
   color: #112233;
}

.project-goal,
.project-description {
   margin-bottom: 0.5rem;
   text-align: justify;
   flex-grow: 1;
   /* Allow these elements to grow and fill the available space */
}

.project-milestones {
   margin-bottom: 0.5rem;
}

.milestones-list {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
}

.milestone-item {
   padding: 0.5rem;
   margin: 0.25rem;
   margin-bottom: 0.5rem;
   display: inline-block;
   color: #777;
   font-size: 10px;

}


.active-section-flex {
   display: flex;
}

.active-section-block {
   display: block;
}


/* ------------------------------------------------------------------ */
/* l. Publications
/* ------------------------------------------------------------------ */
.publications-section {
   padding: 1rem;
   background-color: #ddd;
   padding-top: 107px;
   padding-bottom: 77px;
}

.publication {
   background: #fff;
   padding-top: 20px;
   padding-bottom: 20px;
   overflow: hidden;
}

#publications .publication {
   margin-top: 30px;
   margin-bottom: 54px;
}

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

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

.publication h3 {
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
   color: #112233;
}

.publication p {
   margin-bottom: 0.5rem;
   text-align: justify;
}

.publication a {
   color: #112233;
   text-decoration: underline;
}

/*----------------------------------------------*/
/*	Collaborations Section
/*----------------------------------------------*/

#collaborations,
.collaborations-section {
   background: #112233;
   padding-top: 90px;
   padding-bottom: 60px;
   color: #ffffff;
}

#collaborations h1,
.collaborations-section h1 {
   color: #ffffff;
}

#collaborations h2,
.collaborations-section h2 {
   color: #ff9151;
   font-size: 24px;
   margin-bottom: 15px;
}

#collaborations h3,
.collaborations-section h3 {
   color: #112233;
   font-size: 18px;
   margin: 20px 0 10px 0;
}

#collaborations a,
.collaborations-section a {
   color: #7cbb00;
}

#collaborations .collaboration,
.collaborations-section .collaboration {
   margin-bottom: 60px;
   padding: 25px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 8px;
}

.collaboration-projects ul {
   list-style-type: none;
   padding-left: 0;
}

.collaboration-projects ul li {
   padding: 5px 0;
   border-left: 3px solid #ff9151;
   padding-left: 10px;
   margin-bottom: 8px;
}

.collaboration-media img {
   border: 2px solid #7cbb00;
   border-radius: 4px;
   max-width: 100%;
}