@charset "UTF-8";
/*-------------------------------------------------
 =  Table of Css

 1.Import google fonts & basic style of template
 2.Header
 3.Isotope filtering
 4.Kenburn slider basic
 5.General
 6.Blog style
 7.Portfolio style
 8.Contact section
 9.About style
 10.Features carousel style
 11.Architecture section style
 12.Scroller section style
 13.slider serction style
 14.Unique section style
 15.team style
 16.Tabs, Collapse style
 15.Sidebar Style 
 16.Single Post style
 17.Single Project style
 18.Services style
 19.Footer style
 20.Responsive part
-------------------------------------------------*/
.reset-elem {
  margin: 0;
  padding: 0;
}

p, .paragraph, section.about-section .about-box ul.feature-list li {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  line-height: 26px;
  margin: 0 0 16px;
}

.heading1, h1 {
  color: #ffffff;
  font-size: 50px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 60px;
  margin: 0;
}

.heading2, h2 {
  color: #ffffff;
  font-size: 30px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 26px;
  margin: 0 0 20px;
}

.heading3, h3 {
  color: #ffffff;
  font-size: 25px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: auto;
  margin: 0 0 12px;
}

.heading3, h4 {
  color: #ffffff;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: auto;
  margin: 0 0 6px;
}

.back-cover {
  background-size: cover !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
}

a, .anchor {
  display: inline-block;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

/* Using SCSS variables to store breakpoints */
/*------------------------------------------------- */
/* =  Header
 *------------------------------------------------- */
header {
  position: relative;
  z-index: 999;
}
header .logo {
    position: fixed;
    top: 0;
    left: 100px;
    width: 310px;
    height: 100px;
    padding: 30px 30px 0;
    z-index: 3;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
@media (max-width: 767px) {
  header .logo {
    width: auto !important;
    right: 0;
    text-align: right;
  }
}
header .logo.active {
  left: 0;
}
@media (max-width: 1023px) {
  header .logo.active {
    left: 100px;
  }
}
header .logo a img {
    max-width: 80px;
    height: auto;
    display: compact;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    bottom: 20px;
    opacity: 1;
    -webkit-box-shadow: inset 0px 0px;
    box-shadow: inset 0px 0px;
    left: -20px;
}
@media (max-width: 767px) {
  header .logo a img {
    max-width: 150px;
  }
}
header .header-line {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100px;
  background: #3d3d3d;
  z-index: 2;
}
@media (max-width: 1023px) {
  header .header-line {
    left: -100px;
  }
}
header .header-line a.open-menu-toggle {
  display: block;
  padding: 41px 36px;
  background-color: #3FA9F5;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
@media (max-width: 1023px) {
  header .header-line a.open-menu-toggle {
    position: fixed;
    top: 0;
    left: 0;
  }
}
header .header-line a.open-menu-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #ffffff;
  margin-bottom: 6px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
header .header-line a.open-menu-toggle span:last-child {
  width: 17px;
  margin-bottom: 0;
}
header .header-line a.open-menu-toggle.active {
  margin-top: 100px;
  padding: 49px 36px;
}
@media (max-width: 1023px) {
  header .header-line a.open-menu-toggle.active {
    margin-top: 0;
  }
}
header .header-line a.open-menu-toggle.active span {
  transform: rotate(45deg);
  margin: 0;
  margin-top: -2px;
}
header .header-line a.open-menu-toggle.active span:first-child {
  transform: rotate(-45deg);
  margin-top: 0;
}
header .header-line a.open-menu-toggle.active span:last-child {
  display: none;
}
header .header-line div.social-line {
  padding: 30px 0;
  text-align: center;
  height: calc(100vh - 450px);
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: flex-end;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
header .header-line div.social-line.active {
  height: calc(100vh - 550px);
}
header .header-line div.social-line:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  bottom: 30px;
  width: 1px;
  background-color: #4c4c4c;
}
header .header-line div.social-line ul.social-list {
  padding: 20px 0;
  margin: 0 0 40px;
  background: #3d3d3d;
  position: relative;
  z-index: 2;
}
header .header-line div.social-line ul.social-list li {
  display: block;
  margin-bottom: 13px;
}
header .header-line div.social-line ul.social-list li:last-child {
  margin-bottom: 0;
}
header .header-line div.social-line ul.social-list li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #4c4c4c;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
}
header .header-line div.social-line ul.social-list li a:hover {
  background-color: #3FA9F5;
  color: #ffffff;
  border-color: transparent;
}
header .header-line div.copyright-line {
  text-align: center;
  height: 350px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #272727;
}
header .header-line div.copyright-line p {
  color: #ffffff;
  font-size: 17px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
}
header .nav-menu-box {
  position: fixed;
  top: 100px;
  left: -300px;
  width: 400px;
  background-color: #717171;
  padding: 40px;
  text-align: right;
  max-height: calc(100vh - 100px);
  overflow-y: scroll;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
@media (max-width: 1023px) {
  header .nav-menu-box {
    left: -100vw;
    width: 100vw;
  }
}
@media (max-width: 767px) {
  header .nav-menu-box {
    padding: 10px 20px;
  }
}
header .nav-menu-box.active {
  left: 100px;
}
@media (max-width: 1023px) {
  header .nav-menu-box.active {
    left: 0;
  }
}
header .nav-menu-box ul.navigation-menu-list {
  padding: 10px 0;
  margin: 0;
  border-left: 1px solid #868686;
  border-right: 1px solid #868686;
  counter-reset: my-awesome-counter;
}
header .nav-menu-box ul.navigation-menu-list > li {
  display: block;
  margin-left: -10px;
  margin-right: -10px;
  border-bottom: 1px solid #868686;
  position: relative;
  counter-increment: my-awesome-counter;
}
header .nav-menu-box ul.navigation-menu-list > li::before {
  content: "0" counter(my-awesome-counter);
  position: absolute;
  top: 38px;
  left: 30px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.1);
  font-size: 20px;
  margin-right: 0.5rem;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
@media (max-width: 767px) {
  header .nav-menu-box ul.navigation-menu-list > li::before {
    top: 22px;
  }
}
header .nav-menu-box ul.navigation-menu-list > li.active::before, header .nav-menu-box ul.navigation-menu-list > li:hover::before {
  left: 42px;
  color: #ffffff;
}
header .nav-menu-box ul.navigation-menu-list > li:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  top: 47px;
  left: 10px;
  background-color: #868686;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
@media (max-width: 767px) {
  header .nav-menu-box ul.navigation-menu-list > li:after {
    top: 31px;
  }
}
header .nav-menu-box ul.navigation-menu-list > li.active::after, header .nav-menu-box ul.navigation-menu-list > li:hover::after {
  width: 32px;
}
header .nav-menu-box ul.navigation-menu-list > li:first-child {
  border-top: 1px solid #868686;
}
header .nav-menu-box ul.navigation-menu-list > li > a {
  display: block !important;
  padding: 36px 25px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  font-family: "Montserrat", sans-serif;
}
@media (max-width: 767px) {
  header .nav-menu-box ul.navigation-menu-list > li > a {
    padding: 20px;
  }
}
header .nav-menu-box ul.navigation-menu-list > li > a:after {
  content: "";
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  line-height: 10px;
  padding-left: 1px;
  font-size: 8px;
  width: 16px;
  height: 11px;
  top: 42px;
  right: 1px;
  background-color: #717171;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  z-index: 2;
}
@media (max-width: 767px) {
  header .nav-menu-box ul.navigation-menu-list > li > a:after {
    top: 26px;
  }
}
header .nav-menu-box ul.navigation-menu-list > li > a span {
  display: inline-block;
  position: relative;
  z-index: 2;
}
header .nav-menu-box ul.navigation-menu-list > li > a span em {
  position: relative;
  z-index: 2;
  font-style: normal;
}
header .nav-menu-box ul.navigation-menu-list > li > a span:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 1px;
  top: 50%;
  right: 100%;
  background-color: #868686;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
header .nav-menu-box ul.navigation-menu-list > li > a span:after {
  content: "";
  position: absolute;
  height: 4px;
  margin-top: -2px;
  top: 50%;
  right: -56px;
  margin-left: 56px;
  left: 100%;
  background-color: #3FA9F5;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
header .nav-menu-box ul.navigation-menu-list > li > a:hover span:before {
  width: 0;
}
header .nav-menu-box ul.navigation-menu-list > li > a:hover span:after {
  margin-left: 0;
  left: -20px;
}
header .nav-menu-box ul.navigation-menu-list > li.active > a span:before {
  width: 0;
}
header .nav-menu-box ul.navigation-menu-list > li.active > a span:after {
  margin-left: 0;
  left: -20px;
}

ul.sub-menu {
  display: none;
  padding: 0 10px;
  margin: 0;
  border-top: 1px solid #868686;
}
ul.sub-menu li {
  display: block;
  background-color: #6b6b6b;
  border-top: 1px solid #868686 !important;
}
ul.sub-menu li:first-child {
  border-top: none !important;
}
ul.sub-menu li a {
  padding: 12px 18px;
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}
ul.sub-menu li a:hover {
  color: #3FA9F5;
}

/**
 * Allows you to use retina images at various pixel densities.
 * Examples:
 *
 *   @include retina(/images/mypic.jpg, 2);
 *   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
 *
 * @param  {Value}  $path               The path to the file name minus extension.
 * @param  {Number} $cap:    2          The highest pixel density level images exist for.
 * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
 * @param  {Value}  $extras: null       Any other `background` values to be added.
 */
/*-------------------------------------------------- */
/* 1. Isotope filtering */
/*------------------------------------------------- */
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
}

/*-----------------------------------------------------------------------------
 *
 *KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
 *
 *Screen Stylesheet
 *
 *version:    1.0
 *date:       07/27/11
 *author:     themepunch
 *email:      support@themepunch.com
 *website:    http://www.themepunch.com */
/*----------------------------------------------------------------------------- */
.boxedcontainer {
  max-width: 1170px;
  margin: auto;
  padding: 0px 30px;
}

/*********************************************
 *    -   SETTINGS FOR BANNER CONTAINERS  -
 ********************************************* */
.tp-banner-container {
  width: 100%;
  position: relative;
  padding: 0;
}

.tp-banner {
  width: 100%;
  position: relative;
}

.tp-banner-fullscreen-container {
  width: 100%;
  position: relative;
  padding: 0;
}

.slotholder:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/*------------------------------------------------- */
/* =  General */
/*------------------------------------------------- */
.ip-header {
  position: fixed;
  top: 0;
  z-index: 99999;
  min-height: 480px;
  width: 100%;
  height: 100%;
  background: #242424;
}

.ip-header h1 {
  margin: 0;
}

.ip-logo,
.ip-loader {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

.ip-logo {
  top: 0;
  height: 100%;
  transform: translate3d(0, 25%, 0);
  text-align: center;
}

.ip-logo img {
  max-width: 250px;
}

.ip-loader {
  bottom: 20%;
}

.ip-header .ip-inner {
  display: block;
  margin: 0 auto;
}

.ip-header .ip-loader svg {
  fill: #242424;
}

.ip-header .ip-loader svg path.ip-loader-circlebg {
  stroke: #333333 !important;
  stroke-width: 5px;
}

.ip-header .ip-loader svg path.ip-loader-circle {
  transition: stroke-dashoffset 0.2s;
  stroke: #3FA9F5;
  stroke-width: 2px;
}

.loading .ip-logo,
.loading .ip-loader {
  opacity: 1;
  animation: animInitialHeader 1s cubic-bezier(0.7, 0, 0.3, 1) both;
}

.loading .ip-loader {
  animation-delay: 0.2s;
}

@keyframes animInitialHeader {
  from {
    opacity: 0;
    transform: translate3d(0, 800px, 0);
  }
}
.loaded .ip-logo,
.loaded .ip-loader {
  opacity: 1;
}

.loaded .ip-logo {
  transform-origin: 50% 0;
  animation: animLoadedLogo 1s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes animLoadedLogo {
  to {
    transform: translate3d(0, 100%, 0) translate3d(0, 50px, 0) scale3d(0.65, 0.65, 1);
  }
}
.loaded .ip-logo {
  animation: animLoadedLoader 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.loaded .ip-loader {
  animation: animLoadedLoader 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes animLoadedLoader {
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0) scale3d(0.3, 0.3, 1);
  }
}
.loaded .ip-header {
  animation: animLoadedHeader 1s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes animLoadedHeader {
  to {
    transform: translate3d(0, -100%, 0);
  }
}
/* Content animations */
.loaded .ip-main h2,
.loaded .ip-main .browser,
.loaded .ip-main .browser .box,
.loaded .codrops-demos {
  animation: animLoadedContent 1s cubic-bezier(0.7, 0, 0.3, 1) both;
}

.loaded .ip-main .browser,
.loaded .ip-main .browser .box:first-child {
  animation-delay: 0.1s;
}

.loaded .ip-main .browser .box:nth-child(2) {
  animation-delay: 0.15s;
}

.loaded .ip-main .browser .box:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes animLoadedContent {
  from {
    opacity: 0;
    transform: translate3d(0, 200px, 0);
  }
}
.layout-switch .ip-header {
  position: absolute;
}

.no-js .ip-header {
  position: relative;
  min-height: 0px;
}

.no-js .ip-header .ip-logo {
  margin-top: 20px;
  height: 180px;
  opacity: 1;
  transform: none;
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}

.cursor--small {
  width: 5px;
  height: 5px;
  left: -2.5px;
  top: -2.5px;
  border-radius: 50%;
  z-index: 11000;
  background: #ffffff;
}

.cursor--canvas {
  width: 100vw;
  height: 100vh;
  z-index: 12000;
}

body {
  background: #242424;
  font-family: "Montserrat", sans-serif;
}

.container {
  max-width: 1170px;
}

#container {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.loaded #container {
  opacity: 1;
}

@media (max-width: 767px) {
  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 24px;
  }
}
#content {
  padding-left: 100px;
}
@media (max-width: 1023px) {
  #content {
    padding-left: 0;
  }
}

a.button-one {
  padding: 14px 34px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  border: 1px solid #ffffff;
  position: relative;
}
a.button-one:before {
  content: "";
  position: absolute;
  top: 1px;
  left: -1px;
  width: 0;
  bottom: -1px;
  background: #3FA9F5;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
a.button-one:hover:before {
  width: 100%;
}
a.button-one:hover {
  color: #ffffff;
}
a.button-one span {
  position: relative;
  z-index: 2;
}

a.theme-button {
  display: inline-block;
  padding: 14px 30px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  border: 1px solid #2e2e2e;
  position: relative;
}
a.theme-button:before {
  content: "";
  position: absolute;
  top: 1px;
  left: -1px;
  width: 0;
  bottom: -1px;
  background: #3FA9F5;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
a.theme-button:hover:before {
  width: 100%;
}
a.theme-button span {
  position: relative;
  z-index: 2;
}

div.title-box.center-title {
  text-align: center;
}
div.title-box span {
  display: inline-block;
  font-size: 14px;
  color: rgba(248, 248, 248, 0.7);
  margin-bottom: 4px;
}
div.title-box h2 {
  margin-bottom: 24px;
  line-height: 42px;
}

section.page-banner-section {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section2 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_2.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section3 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_3.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section4 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_4.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section5 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_5.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section6 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_6.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section7 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_7.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section8 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_8.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section9 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_9.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section10 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_10.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section11 {
  padding: 200px 0 100px;
  text-align: center;
  background-image: url("../upload/banners/page-title-bg_11.jpg");
  background-size: cover;
  background-position: center center;
}

section.page-banner-section p {
  margin-bottom: 0;
}

.info-box {
  position: absolute;
  top: 30px;
  right: 30px;
  padding: 15px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 1023px) {
  .info-box {
    display: none;
  }
}
.info-box p {
  color: #ffffff;
  line-height: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.info-box p i {
  font-size: 18px;
  margin-right: 7px;
}
.info-box p span {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: #6e6e6e;
  margin: 0 11px;
}

.divider-line {
  border-bottom: 1px solid #2e2e2e;
}

/*-------------------------------------------------- */
/* Blog style
/*------------------------------------------------- */
section.blog-section {
  padding: 140px 0;
}
section.blog-section .blog-box.col2 {
  margin: -15px;
}
section.blog-section .blog-box.col2 .blog-post {
  width: 50%;
  padding: 15px;
}
@media (max-width: 767px) {
  section.blog-section .blog-box.col2 .blog-post {
    width: 100%;
  }
}

.blog-post a.post-thumbnail {
  display: block;
  margin: 0;
}
.blog-post a.post-thumbnail img {
  width: 100%;
  height: auto;
}
.blog-post .post-content {
  padding: 40px;
  background: #3d3d3d;
}
.blog-post .post-content h3 {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #313131;
}
@media (max-width: 1023px) {
  .blog-post .post-content h3 {
    font-size: 19px;
    line-height: 30px;
  }
}
.blog-post .post-content h3 a {
  color: #ffffff;
}
.blog-post .post-content h3 a:hover {
  color: #3FA9F5;
}
.blog-post .post-content p {
  margin-bottom: 28px;
}
.blog-post.post-list-style {
  display: flex;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #2e2e2e;
}
@media (max-width: 767px) {
  .blog-post.post-list-style {
    flex-wrap: wrap;
  }
}
.blog-post.post-list-style:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.blog-post.post-list-style a.post-thumbnail,
.blog-post.post-list-style .post-content {
  width: 50%;
}
@media (max-width: 767px) {
  .blog-post.post-list-style a.post-thumbnail,
.blog-post.post-list-style .post-content {
    width: 100%;
  }
}
.blog-post.post-list-style a.post-thumbnail img {
  height: 415px;
  object-fit: cover;
  object-position: center;
}
.blog-post.post-list-style .post-content {
  padding: 50px;
}
@media (max-width: 1023px) {
  .blog-post.post-list-style .post-content {
    padding: 30px;
  }
}
.blog-post.post-list-style .post-content h3 {
  padding-top: 26px;
  margin-top: 30px;
}

ul.meta-list {
  padding: 0;
  margin: 0;
}
ul.meta-list li {
  display: inline-block;
  margin-right: 17px;
}
@media (max-width: 1239px) {
  ul.meta-list li {
    margin-right: 10px;
  }
}
ul.meta-list li:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: #ffffff;
  margin-right: 20px;
  float: left;
  margin-top: 14px;
}
@media (max-width: 1239px) {
  ul.meta-list li:before {
    margin-right: 14px;
  }
}
ul.meta-list li:first-child:before {
  display: none;
}
ul.meta-list li a {
  color: #ffffff;
  font-size: 11px;
  font-weight: 300;
  font-family: "Rubik", sans-serif;
  text-transform: uppercase;
  line-height: 30px;
}
ul.meta-list li a i {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #3FA9F5;
  text-align: center;
  font-size: 15px;
  float: left;
  margin-right: 15px;
}
@media (max-width: 1239px) {
  ul.meta-list li a i {
    margin-right: 10px;
  }
}

ul.pagination-list {
  padding: 24px 0 0;
  margin: 40px 0 0;
  border-top: 1px solid #2e2e2e;
}
ul.pagination-list li {
  display: inline-block;
  margin-right: 17px;
}
ul.pagination-list li a {
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  width: 30px;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #2e2e2e;
}
ul.pagination-list li a.active {
  border-bottom: 5px solid #3fa9f5;
  margin-bottom: -4px;
}
ul.pagination-list li a:hover {
  color: #ffffff;
}

/*-------------------------------------------------- */
/* Portfolio style
/*------------------------------------------------- */
section.filter-section {
  background-image: url("../upload/portfolio/portfolio-filter-bg.png");
  background-color: rgba(80, 80, 80, 0.2);
  background-blend-mode: multiply;
  background-size: cover;
  text-align: center;
}
section.filter-section ul.filter {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
section.filter-section ul.filter li {
  display: inline-block;
  padding: 70px 0;
  border-right: 1px solid #5e5e5e;
  width: 160px;
  text-align: center;
}
section.filter-section ul.filter li:first-child {
  border-left: 1px solid #5e5e5e;
}
@media (max-width: 1459px) {
  section.filter-section ul.filter li {
    width: 130px;
    padding: 50px 0;
  }
}
@media (max-width: 1239px) {
  section.filter-section ul.filter li {
    width: auto;
    padding: 20px;
  }
}
@media (max-width: 1023px) {
  section.filter-section ul.filter li {
    width: 25%;
    float: left;
    border-bottom: 1px solid #5e5e5e;
    border-left: none !important;
  }
}
@media (max-width: 767px) {
  section.filter-section ul.filter li {
    width: 33.3333%;
    float: left;
  }
}
section.filter-section ul.filter li a {
  display: inline-block;
  padding: 16px 0;
  color: #f8f8f8;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  position: relative;
}
section.filter-section ul.filter li a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height: 3px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  background: transparent;
}
section.filter-section ul.filter li a.active:before {
  background: #3fa9f5;
}

section.portfolio-section {
  padding: 140px 0;
}
@media (max-width: 1239px) {
  section.portfolio-section {
    padding: 100px 0;
  }
}
@media (max-width: 1023px) {
  section.portfolio-section {
    padding: 60px 15px;
  }
}
@media (max-width: 767px) {
  section.portfolio-section {
    padding: 30px 15px;
  }
}
section.portfolio-section.fullscreen {
  padding: 0;
}
section.portfolio-section .portfolio-box {
  margin: -15px;
}
section.portfolio-section .portfolio-box .portfolio-post {
  width: 33.3333%;
  padding: 15px;
}
@media (max-width: 1239px) {
  section.portfolio-section .portfolio-box .portfolio-post {
    width: 50%;
  }
}
@media (max-width: 767px) {
  section.portfolio-section .portfolio-box .portfolio-post {
    width: 100%;
  }
}
section.portfolio-section .portfolio-box.colum4 .portfolio-post {
  width: 71.5%;
}
@media (max-width: 1239px) {
  section.portfolio-section .portfolio-box.colum4 .portfolio-post {
    width: 50%;
  }
}
@media (max-width: 767px) {
  section.portfolio-section .portfolio-box.colum4 .portfolio-post {
    width: 100%;
  }
}
section.portfolio-section .portfolio-box.colum4 .portfolio-post.with-large-size {
  width: 50%;
}
@media (max-width: 767px) {
  section.portfolio-section .portfolio-box.colum4 .portfolio-post.with-large-size {
    width: 100%;
  }
}
section.portfolio-section .portfolio-box.colum5 .portfolio-post {
  width: 20%;
}
@media (max-width: 1239px) {
  section.portfolio-section .portfolio-box.colum5 .portfolio-post {
    width: 25%;
  }
}
@media (max-width: 1023px) {
  section.portfolio-section .portfolio-box.colum5 .portfolio-post {
    width: 33.3333%;
  }
}
@media (max-width: 767px) {
  section.portfolio-section .portfolio-box.colum5 .portfolio-post {
    width: 100%;
  }
}
section.portfolio-section .portfolio-box.joined {
  margin: 0;
}
section.portfolio-section .portfolio-box.joined .portfolio-post {
  padding: 0;
}

/* Common style */
.portfolio-post figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0;
  width: 100%;
}
.portfolio-post figure:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.portfolio-post figure img {
  position: relative;
  display: block;
  width: 110%;
}

.portfolio-post figure figcaption {
  padding: 30px;
  color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 3;
}

.portfolio-post figure figcaption::before,
.portfolio-post figure figcaption::after {
  pointer-events: none;
}

.portfolio-post figure figcaption,
.portfolio-post figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.portfolio-post figure.hover2 figcaption {
  bottom: 10px;
  left: 10px;
  right: 10px;
  top: inherit;
  width: auto;
  height: auto;
  background-color: #3d3d3d;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.portfolio-post figure figcaption > a {
  z-index: 1000;
  top: 30px;
  left: initial;
  right: 30px;
  width: 60px;
  height: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #ffffff;
  line-height: 56px;
  text-align: center;
}
.portfolio-post figure figcaption > a span {
  position: relative;
  z-index: 2;
  font-size: 20px;
  line-height: 60px;
  color: #ffffff;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.portfolio-post figure figcaption > a:hover span {
  color: #3fa9f5;
}
.portfolio-post figure figcaption > a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%;
  background-color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.portfolio-post figure figcaption > a:hover:after {
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.portfolio-post figure.hover2 figcaption > a {
  border: 5px solid #3fa9f5;
  background-color: #3d3d3d;
  top: -30px;
  right: 20px;
}
.portfolio-post figure.hover2 figcaption > a span {
  line-height: 50px;
}

.portfolio-post figure h4,
.portfolio-post figure p {
  margin: 0;
}
.portfolio-post figure h4 a,
.portfolio-post figure p a {
  color: #ffffff;
}
.portfolio-post figure h4 a:hover,
.portfolio-post figure p a:hover {
  color: #3fa9f5;
}

/*---------------*/
/***** Milo *****/
/*---------------*/
figure.effect-milo {
  background-image: url("../upload/portfolio/portfolio1_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo.hover2:hover img {
  opacity: 1;
}

figure.effect-milo figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 2*****/
/*---------------*/
figure.effect-milo2 {
  background-image: url("../upload/portfolio/portfolio2_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo2 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo2:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo2.hover2:hover img {
  opacity: 1;
}

figure.effect-milo2 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo2:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo2 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo2.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo2.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo2.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo2.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 3*****/
/*---------------*/
figure.effect-milo3 {
  background-image: url("../upload/portfolio/portfolio3_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo3 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo3:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo3.hover2:hover img {
  opacity: 1;
}

figure.effect-milo3 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo3:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo3 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo3.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo3.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo3.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo3.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Milo 4*****/
/*---------------*/
figure.effect-milo4 {
  background-image: url("../upload/portfolio/portfolio4_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo4 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo4:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo4.hover2:hover img {
  opacity: 1;
}

figure.effect-milo4 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo4:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo4 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo4.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo4.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo4.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo4.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


/*---------------*/
/***** Milo 5*****/
/*---------------*/
figure.effect-milo5 {
  background-image: url("../upload/portfolio/portfolio5_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo5 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo5:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo5.hover2:hover img {
  opacity: 1;
}

figure.effect-milo5 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo5:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo5 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo5.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo5.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo5.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo5.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


/*---------------*/
/***** Milo 6*****/
/*---------------*/
figure.effect-milo6 {
  background-image: url("../upload/portfolio/portfolio6_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo6 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo6:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo6.hover2:hover img {
  opacity: 1;
}

figure.effect-milo6 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo6:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo6 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo6.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo6.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo6.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo6.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


/*---------------*/
/***** Milo 7*****/
/*---------------*/
figure.effect-milo7 {
  background-image: url("../upload/portfolio/portfolio7_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo7 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo7:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo7.hover2:hover img {
  opacity: 1;
}

figure.effect-milo7 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo7:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo7 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo7.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo7.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo7.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo7.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 8*****/
/*---------------*/
figure.effect-milo8 {
  background-image: url("../upload/portfolio/portfolio8_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo8 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo8:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo8.hover2:hover img {
  opacity: 1;
}

figure.effect-milo8 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo8:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo8 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo8.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo8.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo8.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo8.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 9*****/
/*---------------*/
figure.effect-milo9 {
  background-image: url("../upload/portfolio/portfolio9_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo9 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo9:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo9.hover2:hover img {
  opacity: 1;
}

figure.effect-milo9 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo9:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo9 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo9.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo9.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo9.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo9.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 10*****/
/*---------------*/
figure.effect-milo10 {
  background-image: url("../upload/portfolio/portfolio12_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo10 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo10:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo10.hover2:hover img {
  opacity: 1;
}

figure.effect-milo10 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo10:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo10 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo10.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo10.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo10.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo10.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 11*****/
/*---------------*/
figure.effect-milo11 {
  background-image: url("../upload/portfolio/portfolio10_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo11 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo11:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo11.hover2:hover img {
  opacity: 1;
}

figure.effect-milo11 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo11:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo11 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo11.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo11.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo11.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo11.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 12*****/
/*---------------*/
figure.effect-milo12 {
  background-image: url("../upload/portfolio/portfolio11_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo12 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo12:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo12.hover2:hover img {
  opacity: 1;
}

figure.effect-milo12 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo12:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo12 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo12.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo12.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo12.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo12.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 13*****/
/*---------------*/
figure.effect-milo13 {
  background-image: url("../upload/portfolio/portfolio13_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo13 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo13:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo13.hover2:hover img {
  opacity: 1;
}

figure.effect-milo13 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo13:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo13 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo13.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo13.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo13.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo13.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 14*****/
/*---------------*/
figure.effect-milo14 {
  background-image: url("../upload/portfolio/portfolio14_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo14 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo14:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo14.hover2:hover img {
  opacity: 1;
}

figure.effect-milo14 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo14:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo14 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo14.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo14.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo14.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo14.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 15*****/
/*---------------*/
figure.effect-milo15 {
  background-image: url("../upload/portfolio/portfolio15_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo15 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo15:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo15.hover2:hover img {
  opacity: 1;
}

figure.effect-milo15 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo15:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo15 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo15.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo15.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo15.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo15.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 16*****/
/*---------------*/
figure.effect-milo16 {
  background-image: url("../upload/portfolio/portfolio16_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo16 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo16:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo16.hover2:hover img {
  opacity: 1;
}

figure.effect-milo16 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo16:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo16 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo16.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo16.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo16.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo16.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


/*---------------*/
/***** Milo 17*****/
/*---------------*/
figure.effect-milo17 {
  background-image: url("../upload/portfolio/portfolio17_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo17 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo17:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo17.hover2:hover img {
  opacity: 1;
}

figure.effect-milo17 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo17:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo17 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo17.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo17.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo17.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo17.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 18*****/
/*---------------*/
figure.effect-milo18 {
  background-image: url("../upload/portfolio/portfolio18_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo18 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo18:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo18.hover2:hover img {
  opacity: 1;
}

figure.effect-milo18 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo18:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo18 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo18.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo18.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo18.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo18.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 19*****/
/*---------------*/
figure.effect-milo19 {
  background-image: url("../upload/portfolio/portfolio19_b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo19 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo19:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo19.hover2:hover img {
  opacity: 1;
}

figure.effect-milo19 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo19:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo19 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo19.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo19.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo19.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo19.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 20*****/
/*---------------*/
figure.effect-milo20 {
  background-image: url("../upload/video/project_2/portfolio-img-2b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo20 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo20:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo20.hover2:hover img {
  opacity: 1;
}

figure.effect-milo20 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo20:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo20 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo20.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo20.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo20.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo20.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 21*****/
/*---------------*/
figure.effect-milo21 {
  background-image: url("../upload/video/project_3/portfolio-img-3b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo21 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo21:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo21.hover2:hover img {
  opacity: 1;
}

figure.effect-milo21 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo21:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo21 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo21.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo21.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo21.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo21.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 22*****/
/*---------------*/
figure.effect-milo22 {
  background-image: url("../upload/video/project_4/portfolio-img-4b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo22 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo22:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo22.hover2:hover img {
  opacity: 1;
}

figure.effect-milo22 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo22:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo22 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo22.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo22.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo22.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo22.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 23*****/
/*---------------*/
figure.effect-milo23 {
  background-image: url("../upload/video/project_5/portfolio-img-4b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo23 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo23:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo23.hover2:hover img {
  opacity: 1;
}

figure.effect-milo23 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo23:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo23 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo23.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo22.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo23.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo23.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 24*****/
/*---------------*/
figure.effect-milo24 {
  background-image: url("../upload/video/project_6/portfolio-img-6b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo24 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo24:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo24.hover2:hover img {
  opacity: 1;
}

figure.effect-milo24 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo24:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo24 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo24.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo24.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo24.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo24.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 25*****/
/*---------------*/
figure.effect-milo25 {
  background-image: url("../upload/streaming/project_1/portfolio-img-7b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo25 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo25:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo25.hover2:hover img {
  opacity: 1;
}

figure.effect-milo25 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo25:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo25 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo25.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo25.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo25.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo25.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 26*****/
/*---------------*/
figure.effect-milo26 {
  background-image: url("../upload/streaming/project_2/portfolio-img-2b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo26 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo26:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo26.hover2:hover img {
  opacity: 1;
}

figure.effect-milo26 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo26:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo26 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo26.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo26.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo26.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo26.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 27*****/
/*---------------*/
figure.effect-milo27 {
  background-image: url("../upload/streaming/project_3/portfolio-img-3b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo27 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo27:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo27.hover2:hover img {
  opacity: 1;
}

figure.effect-milo27 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo27:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo27 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo27.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo27.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo27.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo27.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 28*****/
/*---------------*/
figure.effect-milo28 {
  background-image: url("../upload/streaming/project_4/portfolio-img-4b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo28 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo28:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo28.hover2:hover img {
  opacity: 1;
}

figure.effect-milo28 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo28:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo28 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo28.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo28.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo28.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo28.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 29*****/
/*---------------*/
figure.effect-milo29 {
  background-image: url("../upload/animaciones/project_1/portfolio-img-1b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo29 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo29:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo29.hover2:hover img {
  opacity: 1;
}

figure.effect-milo29 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo29:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo29 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo29.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo29.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo29.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo29.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 30*****/
/*---------------*/
figure.effect-milo30 {
  background-image: url("../upload/animaciones/project_2/portfolio-img-2b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo30 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo30:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo30.hover2:hover img {
  opacity: 1;
}

figure.effect-milo30 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo30:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo30 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo30.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo30.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo30.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo30.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 31*****/
/*---------------*/
figure.effect-milo31 {
  background-image: url("../upload/animaciones/project_3/portfolio-img-3b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo31 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo31:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo31.hover2:hover img {
  opacity: 1;
}

figure.effect-milo31 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo31:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo31 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo31.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo31.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo31.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo31.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 32*****/
/*---------------*/
figure.effect-milo32 {
  background-image: url("../upload/video/project_7/portfolio-img-7b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo32 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo32:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo32.hover2:hover img {
  opacity: 1;
}

figure.effect-milo32 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo32:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo32 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo32.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo32.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo32.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo32.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 33*****/
/*---------------*/
figure.effect-milo33 {
  background-image: url("../upload/animaciones/project_4/portfolio-img-4b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo33 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo33:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo33.hover2:hover img {
  opacity: 1;
}

figure.effect-milo33 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo33:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo33 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo33.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo33.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo33.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo33.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 34*****/
/*---------------*/
figure.effect-milo34 {
  background-image: url("../upload/video/project_8/portfolio-img-8b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo34 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo34:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo34.hover2:hover img {
  opacity: 1;
}

figure.effect-milo34 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo34:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo34 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo34.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo34.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo34.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo34.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 35*****/
/*---------------*/
figure.effect-milo35 {
  background-image: url("../upload/video/project_9/portfolio-img-9b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo35 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo35:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo35.hover2:hover img {
  opacity: 1;
}

figure.effect-milo35 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo35:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo35 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo35.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo35.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo35.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo35.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 36*****/
/*---------------*/
figure.effect-milo36 {
  background-image: url("../upload/streaming/project_5/portfolio-img-5b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo36 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo36:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo36.hover2:hover img {
  opacity: 1;
}

figure.effect-milo36 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo36:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo36 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo36.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo36.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo36.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo36.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 37*****/
/*---------------*/
figure.effect-milo37 {
  background-image: url("../upload/video/project_10/portfolio-img-10b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo37 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo37:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo37.hover2:hover img {
  opacity: 1;
}

figure.effect-milo37 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo37:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo37 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo37.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo37.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo37.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo37.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 38*****/
/*---------------*/
figure.effect-milo38 {
  background-image: url("../upload/video/project_10/portfolio-img-10b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo38 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo38:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo38.hover2:hover img {
  opacity: 1;
}

figure.effect-milo38 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo38:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo38 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo38.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo38.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo38.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo38.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 39*****/
/*---------------*/
figure.effect-milo39 {
  background-image: url("../upload/streaming/project_6/portfolio-img-6b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo39 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo39:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo39.hover2:hover img {
  opacity: 1;
}

figure.effect-milo39 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo39:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo39 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo39.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo39.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo39.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo39.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 40*****/
/*---------------*/
figure.effect-milo40 {
  background-image: url("../upload/cursos/project_1/portfolio-img-1b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo40 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo40:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo40.hover2:hover img {
  opacity: 1;
}

figure.effect-milo40 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo40:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo40 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo40.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo40.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo40.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo40.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 41*****/
/*---------------*/
figure.effect-milo41 {
  background-image: url("../upload/cursos/project_2/portfolio-img-1b_comingsoon.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo41 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo41:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo41.hover2:hover img {
  opacity: 1;
}

figure.effect-milo41 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo41:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo41 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo41.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo41.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo41.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo41.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 42*****/
/*---------------*/
figure.effect-milo42 {
  background-image: url("../upload/cursos/project_3/portfolio-img-1b_comingsoon.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo42 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo42:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo42.hover2:hover img {
  opacity: 1;
}

figure.effect-milo42 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo42:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo42 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo42.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo42.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo42.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo42.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Milo 43*****/
/*---------------*/
figure.effect-milo43 {
  background-image: url("../upload/cursos/project_4/portfolio-img-1b.jpg"); /* Reemplaza 'ruta-de-tu-imagen.jpg' con la URL o ruta de tu imagen */
  background-size: cover; /* Ajusta el tamaño de la imagen según el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /* Otras propiedades de fondo opcionales, como background-position, background-attachment, etc., según tus necesidades */
}
figure.effect-milo43 img {
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-milo43:hover img {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

figure.effect-milo43.hover2:hover img {
  opacity: 1;
}

figure.effect-milo43 figcaption > a {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}

figure.effect-milo43:hover figcaption > a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.effect-milo43 p {
  color: #ffffff;
  font-size: 14px;
  text-transform: lowercase;
}

figure.effect-milo43.hover2 p {
  font-size: 13px;
  text-transform: uppercase;
}

.portfolio-post figure.effect-milo43.hover2 h4 {
  font-size: 16px;
  margin-top: 2px;
}

figure.effect-milo43.hover2 figcaption > a {
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
}

figure.effect-milo43.hover2:hover figcaption > a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*------------------------------------------------- */
/* =  Contact section*/
/*------------------------------------------------- */
section.contact-info-section {
  padding: 140px 0;
}
section.contact-info-section .col-lg-4 {
  margin-right: -1px;
}
section.contact-info-section .col-lg-4 .contact-info-post {
  display: flex;
  align-items: center;
  padding: 35px 55px;
  border: 1px solid #3d3d3d;
}
@media (max-width: 1023px) {
  section.contact-info-section .col-lg-4 .contact-info-post {
    margin-bottom: 30px;
    padding: 30px 30px;
  }
}
section.contact-info-section .col-lg-4 .contact-info-post i {
  color: #ffffff;
  font-size: 28px;
  margin-right: 26px;
}
section.contact-info-section .col-lg-4 .contact-info-post h4 {
  font-weight: 400;
  font-size: 19px;
}
section.contact-info-section .col-lg-4 .contact-info-post p {
  margin-bottom: 0;
  font-size: 14px;
}

.contact-form-box {
  padding-top: 50px;
}
.contact-form-box #contact-form {
  padding: 30px 30px 10px;
  border: 1px solid #3d3d3d;
}
@media (max-width: 1023px) {
  .contact-form-box #contact-form {
    margin-bottom: 40px;
  }
}
.contact-form-box #contact-form h4 {
  font-size: 19px;
  font-weight: 400;
  margin-bottom: 20px;
}
.contact-form-box #contact-form .input-line {
  display: flex;
  border-bottom: 1px solid #3d3d3d;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  margin-bottom: 35px;
  position: relative;
}
.contact-form-box #contact-form .input-line:last-child {
  margin-bottom: 0;
}
.contact-form-box #contact-form .input-line label {
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  padding-bottom: 20px;
}
.contact-form-box #contact-form .input-line:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 14px;
  background: #3d3d3d;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.contact-form-box #contact-form .input-line:focus-within {
  border-color: #ffffff;
}
.contact-form-box #contact-form .input-line:focus-within:after {
  left: 100%;
  margin-left: -14px;
  background: #ffffff;
}
.contact-form-box #contact-form input[type=text],
.contact-form-box #contact-form textarea {
  display: block;
  width: 100%;
  padding: 0 12px 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  outline: none;
  border: none;
  margin: 0;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.contact-form-box #contact-form textarea {
  padding: 0;
  height: 124px;
}
.contact-form-box #contact-form button {
  width: 100%;
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  padding: 12px 22px;
  border: none;
  background: #3d3d3d;
  outline: none;
  margin-bottom: 20px;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.contact-form-box #contact-form button:hover {
  background: #3fa9f5;
  color: #ffffff;
}

#msg {
  display: none;
  padding: 14px 30px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
}

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

/*-------------------------------------------------- */
/* About style
/*------------------------------------------------- */
section.about-section {
  padding-top: 130px;
}
section.about-section .about-box img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 30px;
}
section.about-section .about-box img.snd-size {
  height: 430px;
}
section.about-section .about-box .about-content {
  padding-left: 10px;
}
section.about-section .about-box h3 {
  font-size: 26px;
  margin-bottom: 20px;
  margin-top: 26px;
}
section.about-section .about-box p {
  margin-bottom: 24px;
}
section.about-section .about-box ul.feature-list {
  padding: 0;
  margin: 0;
}
section.about-section .about-box ul.feature-list li {
  display: block;
  margin-bottom: 20px;
}
section.about-section .about-box ul.feature-list li:before {
  content: "";
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  font-family: "Font Awesome 5 Free";
  margin-right: 16px;
  float: left;
}

/*-------------------------------------------------- */
/* Features carousel style
/*------------------------------------------------- */
section.features-carousel-section {
  margin-bottom: 130px;
}
section.features-carousel-section .feature-post {
  padding-right: 212px;
  overflow: hidden;
  padding-bottom: 31px;
}
@media (max-width: 1023px) {
  section.features-carousel-section .feature-post {
    padding-right: 0;
  }
}
section.features-carousel-section .feature-post .image-holder {
  float: left;
  width: 60%;
  margin-right: -10%;
  position: relative;
}
@media (max-width: 1023px) {
  section.features-carousel-section .feature-post .image-holder {
    width: 100%;
  }
}
section.features-carousel-section .feature-post .image-holder:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 426px;
  top: 0;
  right: -30px;
  background-color: #2e2e2e;
}
section.features-carousel-section .feature-post .image-holder:before {
  content: "";
  position: absolute;
  width: auto;
  height: 1px;
  bottom: -30px;
  right: -30px;
  left: 0;
  background-color: #2e2e2e;
}
section.features-carousel-section .feature-post img {
  width: 100%;
  height: 396px;
  object-fit: cover;
  object-position: center;
}
section.features-carousel-section .feature-post .feature-post-content {
  width: 50%;
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #3d3d3d;
  padding: 30px;
  float: right;
  position: relative;
  z-index: 2;
}
@media (max-width: 1023px) {
  section.features-carousel-section .feature-post .feature-post-content {
    height: auto;
    width: 100%;
  }
}
section.features-carousel-section .feature-post .feature-post-content span {
  font-size: 20px;
  color: #ffffff;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
section.features-carousel-section .feature-post .feature-post-content span:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #3fa9f5;
  float: left;
  margin-right: 10px;
  margin-top: 10px;
}
section.features-carousel-section .feature-post .feature-post-content h3 {
  font-size: 24px;
  margin-bottom: 0;
  text-transform: uppercase;
}
section.features-carousel-section .owl-dots {
  display: none;
}
section.features-carousel-section .owl-carousel .owl-nav {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #2e2e2e;
  border-left: none;
  width: 212px;
  padding: 48px 0 47px;
  margin: 0;
  background-color: #242424;
}
section.features-carousel-section .owl-carousel .owl-nav button.owl-prev,
section.features-carousel-section .owl-carousel .owl-nav button.owl-next {
  color: #ffffff;
  padding: 50px 20px !important;
  border: 1px solid #2e2e2e;
  font-size: 20px;
  margin: 0 !important;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.features-carousel-section .owl-carousel .owl-nav button.owl-next {
  border-left: none;
  margin-left: -1px !important;
}

.features-section {
  padding: 130px 0;
}
.features-section .features-box .row {
  align-items: center;
}
.features-section .features-box h3 {
  font-size: 26px;
}
.features-section .features-box p {
  margin-bottom: 20px;
}
.features-section .features-box img {
  width: 100%;
  height: auto;
}

.features-section2 {
  padding: 130px 0;
}
.features-section2.no-padd-top {
  padding-top: 0;
}
.features-section2 .features-box2 {
  position: relative;
}
.features-section2 .features-box2:before, .features-section2 .features-box2:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
}
.features-section2 .features-box2:before {
  top: 0;
  right: 0;
  border-top: 2px solid #6c6c6c;
  border-right: 2px solid #6c6c6c;
}
.features-section2 .features-box2:after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #6c6c6c;
  border-right: 2px solid #6c6c6c;
}
.features-section2 .features-box2 .row {
  align-items: center;
}
.features-section2 .images-box {
  position: relative;
  border: 1px solid #2e2e2e;
  padding: 30px;
}
@media (max-width: 1023px) {
  .features-section2 .images-box {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .features-section2 .images-box {
    padding-bottom: 1px;
  }
}
.features-section2 .images-box:before, .features-section2 .images-box:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
}
.features-section2 .images-box:before {
  top: 0;
  left: 0;
  border-top: 2px solid #6c6c6c;
  border-left: 2px solid #6c6c6c;
}
.features-section2 .images-box:after {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #6c6c6c;
  border-left: 2px solid #6c6c6c;
}
.features-section2 .images-box img {
  width: 110%;
  height: auto;
  margin-bottom: 0;
  max-width: none;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.features-section2 .images-box .image-holder {
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .features-section2 .images-box .image-holder {
    margin-bottom: 30px;
  }
}
.features-section2 .images-box .image-holder:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.features-section2 .images-box .image-holder span {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  z-index: 3;
}
.features-section2 .images-box .image-holder:hover span {
  opacity: 1;
}
.features-section2 .images-box .image-holder:hover img {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}
.features-section2 .feature-content {
  text-align: right;
  padding-right: 30px;
}
.features-section2 .feature-content span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 300;
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  margin-bottom: 5px;
}
.features-section2 .feature-content span:after {
  content: "";
  height: 2px;
  width: 30px;
  background-color: #3fa9f5;
  float: right;
  margin-top: 10px;
  margin-left: 15px;
}
@media (max-width: 1023px) {
  .features-section2 .feature-content span:after {
    display: none;
  }
}
.features-section2 .feature-content h3 {
  margin-bottom: 15px;
}
.features-section2 .feature-content p {
  margin-bottom: 0;
}

/*-------------------------------------------------- */
/* Architecture section style
/*------------------------------------------------- */
section.architecture-section {
  padding: 240px 140px 130px;
  background: url("../upload/home8/bg.jpg") center center fixed no-repeat;
  background-size: cover;
}
@media (max-width: 1239px) {
  section.architecture-section {
    padding: 130px 30px 30px 30px;
  }
}
section.architecture-section .architecture-box {
  margin: -50px;
}
@media (max-width: 1459px) {
  section.architecture-section .architecture-box {
    margin: -15px;
  }
}
section.architecture-section .architecture-box .architecture-post {
  width: 33.33333%;
  padding: 50px;
}
@media (max-width: 1459px) {
  section.architecture-section .architecture-box .architecture-post {
    padding: 15px;
  }
}
@media (max-width: 1023px) {
  section.architecture-section .architecture-box .architecture-post {
    width: 50%;
  }
}
@media (max-width: 767px) {
  section.architecture-section .architecture-box .architecture-post {
    width: 100%;
  }
}
section.architecture-section .architecture-box .architecture-post .image-holder {
  overflow: hidden;
}
section.architecture-section .architecture-box .architecture-post img {
  width: 110%;
  height: auto;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
section.architecture-section .architecture-box .architecture-post .hover-box {
  position: absolute;
  bottom: 50px;
  left: 95px;
  right: 95px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.36s ease-in-out;
  -moz-transition: all 0.36s ease-in-out;
  -webkit-transition: all 0.36s ease-in-out;
  -o-transition: all 0.36s ease-in-out;
}
@media (max-width: 1459px) {
  section.architecture-section .architecture-box .architecture-post .hover-box {
    bottom: 15px;
    left: 45px;
    right: 45px;
  }
}
@media (max-width: 1239px) {
  section.architecture-section .architecture-box .architecture-post .hover-box {
    bottom: 15px;
    left: 15px;
    right: 15px;
  }
}
section.architecture-section .architecture-box .architecture-post .hover-box a.cat-link {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 6px;
}
section.architecture-section .architecture-box .architecture-post .hover-box a.cat-link:before {
  content: "";
  display: inline-block;
  width: 27px;
  height: 3px;
  margin-right: 15px;
  background: #3fa9f5;
  margin-top: 8px;
  float: left;
  transition: all 0.36s ease-in-out;
  -moz-transition: all 0.36s ease-in-out;
  -webkit-transition: all 0.36s ease-in-out;
  -o-transition: all 0.36s ease-in-out;
}
section.architecture-section .architecture-box .architecture-post .hover-box h4 {
  font-size: 18px;
  margin-bottom: 0;
}
@media (max-width: 1239px) {
  section.architecture-section .architecture-box .architecture-post .hover-box h4 {
    font-size: 17px;
  }
}
@media (max-width: 1023px) {
  section.architecture-section .architecture-box .architecture-post .hover-box h4 {
    font-size: 18px;
  }
}
section.architecture-section .architecture-box .architecture-post .hover-box h4 a {
  color: #ffffff;
}
section.architecture-section .architecture-box .architecture-post .hover-box h4 a:hover {
  color: #3fa9f5;
}
section.architecture-section .architecture-box .architecture-post:hover img {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}
section.architecture-section .architecture-box .architecture-post:hover .hover-box {
  bottom: 95px;
}
@media (max-width: 1459px) {
  section.architecture-section .architecture-box .architecture-post:hover .hover-box {
    bottom: 45px;
  }
}
@media (max-width: 1239px) {
  section.architecture-section .architecture-box .architecture-post:hover .hover-box {
    bottom: 15px;
  }
}
section.architecture-section .architecture-box .architecture-post:hover .hover-box a.cat-link:before {
  width: 0;
  margin-right: 0;
}

/*-------------------------------------------------- */
/* Scroller section style
/*------------------------------------------------- */
section.scroller-section {
  padding-top: 100px;
}
section.scroller-section .owl-dots,
section.scroller-section .owl-carousel .owl-nav {
  display: none;
}
section.scroller-section .scroller-post {
  position: relative;
}
section.scroller-section .scroller-post .image-holder {
  overflow: hidden;
}
section.scroller-section .scroller-post .image-holder img {
  width: 105%;
  height: calc(100vh - 100px);
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  object-fit: cover;
  object-position: center;
}
section.scroller-section .scroller-post .hover-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 45px;
}
@media (max-width: 1239px) {
  section.scroller-section .scroller-post .hover-box {
    padding: 30px;
  }
}
section.scroller-section .scroller-post .hover-box:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 158, 255, 0) 0%, rgba(0, 158, 255, 0.1) 25%, rgba(0, 158, 255, 0.5) 50%, #009eff 100%);
}
section.scroller-section .scroller-post .hover-box:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 1;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.1) 25%, rgba(11, 11, 11, 0.4) 50%, rgba(11, 11, 11, 0.7) 100%);
}
section.scroller-section .scroller-post .hover-box span {
  display: inline-block;
  width: 87px;
  height: 87px;
  text-align: center;
  line-height: 67px;
  color: #fff;
  border: 10px solid rgba(255, 255, 255, 0.3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  position: relative;
  z-index: 2;
}
section.scroller-section .scroller-post .hover-box a.cat-link {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 20px;
  position: relative;
  z-index: 2;
}
section.scroller-section .scroller-post .hover-box a.cat-link:before {
  content: "";
  display: inline-block;
  width: 86px;
  height: 3px;
  margin-right: 30px;
  background: #fff;
  margin-top: 8px;
  float: left;
  transition: all 0.36s ease-in-out;
  -moz-transition: all 0.36s ease-in-out;
  -webkit-transition: all 0.36s ease-in-out;
  -o-transition: all 0.36s ease-in-out;
}
section.scroller-section .scroller-post .hover-box h3 {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 1459px) {
  section.scroller-section .scroller-post .hover-box h3 {
    font-size: 20px;
  }
}
section.scroller-section .scroller-post .hover-box h3 a {
  color: #ffffff;
}
section.scroller-section .scroller-post .hover-box h3 a:hover {
  opacity: 0.7;
}
section.scroller-section .scroller-post:hover .image-holder img {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}
section.scroller-section .scroller-post:hover .hover-box:before {
  opacity: 1;
}
section.scroller-section .scroller-post:hover .hover-box:after {
  opacity: 0;
}
section.scroller-section .scroller-post:hover .hover-box a.cat-link:before {
  width: 0;
  margin-right: 0;
}

section.scroller-section2 {
  background: url("../upload/home7/bg.jpg") center center fixed no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  height: 100vh;
  padding: 100px 100px 0;
}
@media (max-width: 767px) {
  section.scroller-section2 {
    padding: 100px 75px 0 15px;
  }
}
section.scroller-section2 .owl-dots,
section.scroller-section2 .owl-carousel .owl-nav {
  display: none;
}
section.scroller-section2 .scroller-box {
  max-height: 510px;
  overflow: hidden;
}
section.scroller-section2 .item {
  margin: 0 50px;
}
@media (max-width: 767px) {
  section.scroller-section2 .item {
    margin: 0;
  }
}
section.scroller-section2 .scroller-post .image-holder {
  overflow: hidden;
  position: relative;
  margin-left: 200px;
  height: 510px;
}
@media (max-width: 1459px) {
  section.scroller-section2 .scroller-post .image-holder {
    margin-left: 100px;
  }
}
@media (max-width: 767px) {
  section.scroller-section2 .scroller-post .image-holder {
    margin-left: 0;
  }
}
section.scroller-section2 .scroller-post .image-holder img {
  width: 110%;
  height: 510px;
  object-fit: cover;
  object-position: center;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
section.scroller-section2 .scroller-post .image-holder:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 1;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.1) 25%, rgba(11, 11, 11, 0.4) 50%, #0b0b0b 100%);
}
section.scroller-section2 .scroller-post .image-holder span {
  position: absolute;
  bottom: 95px;
  left: 30px;
  display: block;
  width: 65px;
  height: 65px;
  text-align: center;
  line-height: 55px;
  color: #fff;
  border: 5px solid rgba(255, 255, 255, 0.3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 26px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  position: relative;
  z-index: 2;
}
section.scroller-section2 .scroller-post .hover-box {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 45px;
}
@media (max-width: 767px) {
  section.scroller-section2 .scroller-post .hover-box {
    max-width: 100%;
    padding: 30px;
  }
}
section.scroller-section2 .scroller-post .hover-box a.cat-link {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 20px;
  margin-left: -30px;
  position: relative;
  z-index: 2;
}
section.scroller-section2 .scroller-post .hover-box a.cat-link:before {
  content: "";
  display: inline-block;
  width: 27px;
  height: 3px;
  margin-right: 15px;
  background: #3fa9f5;
  margin-top: 8px;
  float: left;
  transition: all 0.36s ease-in-out;
  -moz-transition: all 0.36s ease-in-out;
  -webkit-transition: all 0.36s ease-in-out;
  -o-transition: all 0.36s ease-in-out;
}
section.scroller-section2 .scroller-post .hover-box h3 {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 1459px) {
  section.scroller-section2 .scroller-post .hover-box h3 {
    font-size: 20px;
  }
}
section.scroller-section2 .scroller-post .hover-box h3 a {
  color: #ffffff;
}
section.scroller-section2 .scroller-post .hover-box h3 a:hover {
  color: #3fa9f5;
}
section.scroller-section2 .scroller-post:hover .image-holder img {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}
section.scroller-section2 .scroller-post:hover .hover-box:before {
  opacity: 1;
}
section.scroller-section2 .scroller-post:hover .hover-box:after {
  opacity: 0;
}
section.scroller-section2 .scroller-post:hover .hover-box a.cat-link:before {
  width: 0;
  margin-right: 0;
}

p.fixed-notifier {
  position: fixed;
  top: 50%;
  right: -45px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 22;
  transform: rotate(-90deg);
}
p.fixed-notifier span {
  display: inline-block;
  float: right;
  width: 30px;
  height: 17px;
  margin-top: 4px;
  margin-left: 20px;
  position: relative;
  border: 1px solid #ffffff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
p.fixed-notifier span:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 4px;
  background: #ffffff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
}

section.scroller-section3 {
  padding-top: 100px;
}
section.scroller-section3 .owl-dots {
  display: none;
}
section.scroller-section3 .scroller-post {
  position: relative;
}
section.scroller-section3 .scroller-post .image-holder {
  overflow: hidden;
}
section.scroller-section3 .scroller-post .image-holder img {
  width: 110% !important;
  height: calc(100vh - 100px);
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
  transform: translate3d(-30px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  object-fit: cover;
  object-position: center;
}
section.scroller-section3 .scroller-post .hover-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 45px;
}
@media (max-width: 767px) {
  section.scroller-section3 .scroller-post .hover-box {
    padding: 30px;
  }
}
section.scroller-section3 .scroller-post .hover-box:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 158, 255, 0) 0%, rgba(0, 158, 255, 0.1) 25%, rgba(0, 158, 255, 0.5) 50%, #bd2323 100%);
}
section.scroller-section3 .scroller-post .hover-box:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 1;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  background: rgba(0, 0, 0, 0.5);
}
section.scroller-section3 .scroller-post .hover-box span {
  display: inline-block;
  width: 87px;
  height: 87px;
  text-align: center;
  line-height: 67px;
  color: #fff;
  border: 10px solid rgba(255, 255, 255, 0.3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  position: relative;
  z-index: 2;
}
section.scroller-section3 .scroller-post .hover-box a.cat-link {
  color: #ffffff;
  font-size: 14px;
  font-weight: 300;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 10px;
  position: relative;
  z-index: 2;
}
section.scroller-section3 .scroller-post .hover-box a.cat-link:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 3px;
  margin-right: 0;
  background: #fff;
  margin-top: 8px;
  float: left;
  transition: all 0.36s ease-in-out;
  -moz-transition: all 0.36s ease-in-out;
  -webkit-transition: all 0.36s ease-in-out;
  -o-transition: all 0.36s ease-in-out;
}
section.scroller-section3 .scroller-post .hover-box h4 {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
section.scroller-section3 .scroller-post .hover-box h4 a {
  color: #ffffff;
}
section.scroller-section3 .scroller-post .hover-box h4 a:hover {
  opacity: 0.7;
}
section.scroller-section3 .scroller-post:hover .image-holder img {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}
section.scroller-section3 .scroller-post:hover .hover-box:before {
  opacity: 1;
}
section.scroller-section3 .scroller-post:hover .hover-box:after {
  opacity: 0;
}
section.scroller-section3 .scroller-post:hover .hover-box a.cat-link:before {
  width: 27px;
  margin-right: 15px;
}
section.scroller-section3 .owl-carousel .owl-nav {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  margin-top: -35px;
}
section.scroller-section3 .owl-carousel .owl-nav button {
  width: 70px;
  height: 70px;
  background: #3fa9f5;
  color: #ffffff;
  text-align: center;
  border: 10px solid #242424;
  line-height: 40px;
  font-size: 26px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.scroller-section3 .owl-carousel .owl-nav button:hover {
  opacity: 0.85;
  background: #3fa9f5;
}
section.scroller-section3 .owl-carousel .owl-nav button.owl-prev {
  float: left;
  margin-left: 70px;
}
@media (max-width: 767px) {
  section.scroller-section3 .owl-carousel .owl-nav button.owl-prev {
    margin-left: 30px;
  }
}
section.scroller-section3 .owl-carousel .owl-nav button.owl-next {
  float: right;
  margin-right: 70px;
}
@media (max-width: 767px) {
  section.scroller-section3 .owl-carousel .owl-nav button.owl-next {
    margin-right: 30px;
  }
}

section.scroller-section4 {
  padding: 150px 50px 50px;
}
@media (max-width: 1459px) {
  section.scroller-section4 {
    padding: 130px 30px 30px;
  }
}
section.scroller-section4 .owl-dots,
section.scroller-section4 .owl-carousel .owl-nav {
  display: none;
}
section.scroller-section4 .scroller-box {
  border-right: 1px solid #353535;
}
section.scroller-section4 a.scroller-post {
  border: 1px solid #353535;
  border-right: none;
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}
@media (max-width: 1459px) {
  section.scroller-section4 a.scroller-post {
    height: calc(100vh - 160px);
  }
}
section.scroller-section4 a.scroller-post .num-holder {
  height: 40%;
  padding: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #353535;
}
section.scroller-section4 a.scroller-post .num-holder span {
  display: inline-block;
  font-size: 160px;
  line-height: 60px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  color: #3c3c3c;
  letter-spacing: 10px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.scroller-section4 a.scroller-post .cont-holder {
  height: 60%;
  padding: 40px 50px 50px;
  position: relative;
}
@media (max-width: 1459px) {
  section.scroller-section4 a.scroller-post .cont-holder {
    padding: 30px 30px 30px;
  }
}
section.scroller-section4 a.scroller-post .cont-holder span.cat-link {
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 300;
  font-family: "Montserrat", sans-serif;
  margin: 0 0 10px;
  position: relative;
  z-index: 2;
}
@media (max-width: 1239px) {
  section.scroller-section4 a.scroller-post .cont-holder span.cat-link {
    display: none;
  }
}
section.scroller-section4 a.scroller-post .cont-holder span.cat-link:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 2px;
  margin-right: 10px;
  background: #3fa9f5;
  margin-top: 8px;
  float: left;
  transition: all 0.36s ease-in-out;
  -moz-transition: all 0.36s ease-in-out;
  -webkit-transition: all 0.36s ease-in-out;
  -o-transition: all 0.36s ease-in-out;
}
section.scroller-section4 a.scroller-post .cont-holder h4 {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  color: #ffffff;
}
@media (max-width: 1459px) {
  section.scroller-section4 a.scroller-post .cont-holder h4 {
    font-size: 18px;
  }
}
section.scroller-section4 a.scroller-post .cont-holder .text-holder {
  position: relative;
  z-index: 2;
  padding-bottom: 24px;
  background: #242424;
}
section.scroller-section4 a.scroller-post .cont-holder img {
  position: absolute;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  object-fit: cover;
  object-position: center;
  top: 50px;
  left: 50px;
}
@media (max-width: 1459px) {
  section.scroller-section4 a.scroller-post .cont-holder img {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    top: 30px;
    left: 30px;
  }
}
section.scroller-section4 a.scroller-post:hover .num-holder span {
  color: #ffffff;
}
section.scroller-section4 a.scroller-post:hover .cont-holder span.cat-link:before {
  width: 0;
  margin-right: 0;
}
section.scroller-section4 .owl-item:nth-child(2n) .scroller-post {
  flex-direction: column-reverse !important;
}
section.scroller-section4 .owl-item:nth-child(2n) .scroller-post .num-holder {
  border-top: 1px solid #353535;
  border-bottom: none;
}

/*-------------------------------------------------- */
/* slider serction style
/*------------------------------------------------- */
section.slider-section {
  padding-top: 100px;
}
section.slider-section.slider-style2 {
  padding-top: 230px;
  margin-bottom: 130px;
}
@media (max-width: 1023px) {
  section.slider-section.slider-style2 {
    padding-top: 100px;
  }
}
@media (max-width: 767px) {
  section.slider-section.slider-style2 {
    padding-top: 100px;
  }
}
section.slider-section.slider-style2 .tp-caption.NotGeneric-Title {
  font-weight: 700;
  text-transform: inherit;
}
section.slider-section.slider-style2 .tp-caption.NotGeneric-Title span.big-number {
  display: inline-block;
  width: 140px;
  height: 140px;
  background-color: #242424;
  color: #ffffff;
  text-align: center !important;
  font-size: 90px !important;
  line-height: 140px !important;
}
section.slider-section.fullscreen-style {
  padding-top: 0;
}
section.slider-section.fullscreen-style .tp-caption.NotGeneric-SubTitle span {
  padding: 0;
  background-color: transparent;
  position: relative;
  z-index: 999999;
  padding-left: 50px !important;
}
section.slider-section.fullscreen-style .tp-caption.NotGeneric-SubTitle span:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background: #3fa9f5;
  position: absolute;
  top: 50%;
  left: 0px;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}
section.slider-section.fullscreen-style .tp-caption.NotGeneric-SubTitle a {
  color: #ffffff;
  padding: 10px 28px;
  border: 2px solid #fff;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  text-transform: uppercase;
  font-weight: 400;
}
section.slider-section.fullscreen-style .tp-caption.NotGeneric-SubTitle a:hover {
  background-color: #3fa9f5;
  border-color: transparent;
}
section.slider-section.fullscreen-style .tp-bullets {
  height: 70px !important;
  background-color: #3d3d3d;
  width: 170px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
@media (max-width: 1023px) {
  section.slider-section.fullscreen-style .tp-bullets {
    transform: matrix(1, 0, 0, 1, 0, -70) !important;
  }
}
@media (max-width: 767px) {
  section.slider-section.fullscreen-style .tp-bullets {
    display: none !important;
  }
}
section.slider-section.fullscreen-style .tp-bullets .tp-bullet {
  position: relative !important;
  left: inherit !important;
  height: 10px;
  width: 10px;
  border: 1px solid #5f5f5f;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: transparent;
  margin: 0 10px;
}
section.slider-section.fullscreen-style .tp-bullets .tp-bullet.selected {
  border-color: transparent;
  background-color: #3fa9f5;
}
section.slider-section.fullscreen-style .tp-bullets .tp-bullet.selected:after {
  content: "";
  position: absolute;
  top: -9px;
  left: -9px;
  right: -9px;
  bottom: -9px;
  border: 2px solid #878787;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
section.slider-section.fullscreen-style .tp-static-layer {
  color: #ffffff;
  width: 60px;
  height: 60px;
  border: 10px solid rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
}
section.slider-section.fullscreen-style li {
  counter-increment: section;
}
section.slider-section.fullscreen-style li:after {
  content: "0" counter(section);
  position: absolute;
  top: 130px;
  right: 30px;
  color: rgba(255, 255, 255, 0.15);
  font-size: 90px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  width: 150px;
  text-align: center;
  line-height: 140px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
@media (max-width: 1023px) {
  section.slider-section.fullscreen-style li:after {
    display: none;
  }
}
section.slider-section.fullscreen-style li:before {
  content: "";
  position: absolute;
  bottom: 60%;
  top: 272px;
  right: 30px !important;
  left: initial !important;
  visibility: visible;
  width: 1px;
  display: inline-block;
  z-index: 2;
  background: #ffffff;
  opacity: 0.3 !important;
}
@media (max-width: 1023px) {
  section.slider-section.fullscreen-style li:before {
    display: none;
  }
}
section.slider-section.with-back-overlay .slotholder:after {
  display: block;
  width: 50% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.95);
  background-blend-mode: multiply;
  background-size: cover;
  background-image: url("../upload/home10/bg2.png");
  position: absolute;
  top: 0;
  left: 0;
  z-index: 17;
  margin-left: 100px;
}
@media (max-width: 1023px) {
  section.slider-section.with-back-overlay .slotholder:after {
    width: 60% !important;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  section.slider-section.with-back-overlay .slotholder:after {
    width: 100% !important;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
section.slider-section .progress-holder {
  margin: 33px 170px 33px 300px;
  position: relative;
  height: 4px;
  border-left: 1px solid #3d3d3d;
  border-right: 1px solid #3d3d3d;
  background-color: #3d3d3d;
  border-radius: 2px;
}
@media (max-width: 1023px) {
  section.slider-section .progress-holder {
    margin: 33px 170px 33px 200px;
  }
}
@media (max-width: 767px) {
  section.slider-section .progress-holder {
    margin: 33px 170px 33px 33px;
  }
}
section.slider-section .tp-bannertimer {
  background-color: #3fa9f5 !important;
  bottom: 1px !important;
}
section.slider-section .custom-navigator-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  left: 0;
  background-color: #272727;
  z-index: 20;
}
section.slider-section .tp-caption.NotGeneric-Title {
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: inherit;
}
section.slider-section .tp-caption.NotGeneric-SubTitle {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: inherit;
}
section.slider-section .tp-caption.NotGeneric-SubTitle span {
  display: inline-block;
  font-weight: 600;
  padding: 8px 14px;
  background-color: #3fa9f5;
}
section.slider-section .tparrows {
  width: 70px;
  height: 70px;
  background-color: #3d3d3d;
  border: 10px solid #242424;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.slider-section .tparrows:before {
  line-height: 50px;
}
section.slider-section .tparrows.tp-leftarrow:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  width: 1px;
  background-color: #3a3a3a;
}
section.slider-section .tparrows:hover {
  background-color: #3fa9f5;
}

#rev_slider_41_1_wrapper {
  padding-left: 100px !important;
  background-color: transparent !important;
}
#rev_slider_41_1_wrapper .slotholder:after {
  display: none;
}
@media (max-width: 1023px) {
  #rev_slider_41_1_wrapper {
    padding-left: 0 !important;
  }
}
#rev_slider_41_1_wrapper .tparrows {
  width: 60px;
  height: 60px;
  color: #ffffff !important;
  background-color: #3fa9f5;
  border: none;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
#rev_slider_41_1_wrapper .tparrows:before {
  color: #ffffff !important;
  line-height: 46px;
}
#rev_slider_41_1_wrapper .tparrows.tp-leftarrow:after {
  display: none;
}
#rev_slider_41_1_wrapper .FoodCarousel-Button {
  color: #ffffff;
  border: none;
  background-color: #3d3d3d;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
}
#rev_slider_41_1_wrapper .erinyen .tp-thumb .tp-thumb-over {
  background-color: rgba(0, 0, 0, 0.7);
}
#rev_slider_41_1_wrapper .erinyen .tp-thumb.selected .tp-thumb-over,
#rev_slider_41_1_wrapper .erinyen .tp-thumb:hover .tp-thumb-over {
  background-color: rgba(61, 61, 61, 0.9);
}
#rev_slider_41_1_wrapper .erinyen .tp-thumb-more:before {
  display: none;
}
#rev_slider_41_1_wrapper .erinyen .tp-thumb-title {
  font-size: 13px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffffff;
  opacity: 0.4;
}
#rev_slider_41_1_wrapper .erinyen .tp-thumb.selected .tp-thumb-title,
#rev_slider_41_1_wrapper .erinyen .tp-thumb:hover .tp-thumb-title {
  color: #ffffff;
  opacity: 1;
}
#rev_slider_41_1_wrapper .tp-caption.FoodCarousel-Content,
#rev_slider_41_1_wrapper .FoodCarousel-Content {
  background-color: #272727;
  color: #ffffff;
}
#rev_slider_41_1_wrapper .tp-caption.FoodCarousel-CloseButton, #rev_slider_41_1_wrapper .FoodCarousel-CloseButton {
  background-color: #3fa9f5;
  color: #ffffff;
  border-radius: 0px;
}
#rev_slider_41_1_wrapper span.foodcarousel-headline {
  display: inline-block;
  font-size: 24px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin-bottom: 20px;
}
#rev_slider_41_1_wrapper p.slide-line {
  display: block;
  border: 1px solid #3d3d3d;
  border-bottom: none;
  margin: 0;
}
#rev_slider_41_1_wrapper p.slide-line.last-slide-line {
  border-bottom: 1px solid #3d3d3d;
  margin-bottom: 20px;
}
#rev_slider_41_1_wrapper p.slide-line span {
  display: inline-block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 300;
  line-height: 50px;
}
#rev_slider_41_1_wrapper p.slide-line span.data-name {
  width: 150px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #3d3d3d;
  padding: 0 30px;
  margin-right: 30px;
}

@media (max-width: 767px) {
  .tp-caption.tp-hidden-caption, .tp-forcenotvisible, .tp-hide-revslider, .tp-parallax-wrap.tp-hidden-caption {
    display: block !important;
    visibility: visible !important;
  }
}

@media (max-width: 767px) {
  .tp-static-layers {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .slider-style2 .tp-leftarrow {
    transform: matrix(1, 0, 0, 1, -140, -70) !important;
  }

  .slider-style2 .tp-rightarrow {
    transform: matrix(1, 0, 0, 1, -70, -70) !important;
  }
}
/*-------------------------------------------------- */
/* Unique section style
/*------------------------------------------------- */
section.unique-section {
  padding-top: 260px;
}
@media (max-width: 1459px) {
  section.unique-section {
    padding-top: 160px;
  }
}
@media (max-width: 1023px) {
  section.unique-section {
    padding-top: 100px;
  }
}
section.unique-section .unique-box {
  margin: 0 auto;
  max-width: 1440px;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
}
@media (max-width: 1459px) {
  section.unique-section .unique-box {
    padding-top: 100px;
    max-width: 1200px;
  }
}
@media (max-width: 1239px) {
  section.unique-section .unique-box {
    max-width: 1000px;
    padding-top: 0;
  }
}
section.unique-section .unique-box:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 200px;
  width: 1px;
  background-color: #353535;
}
@media (max-width: 1239px) {
  section.unique-section .unique-box:before {
    display: none;
  }
}
section.unique-section .unique-box ul.unique-list {
  padding-left: 200px;
  padding-right: 100px;
  border-top: 1px solid #353535;
  border-bottom: 1px solid #353535;
  position: relative;
}
@media (max-width: 1239px) {
  section.unique-section .unique-box ul.unique-list {
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  section.unique-section .unique-box ul.unique-list {
    padding-right: 0;
  }
}
section.unique-section .unique-box ul.unique-list li {
  display: block;
  max-width: 520px;
  border-top: 1px solid #353535;
  border-right: 1px solid #353535;
}
@media (max-width: 1459px) {
  section.unique-section .unique-box ul.unique-list li {
    max-width: 480px;
  }
}
@media (max-width: 1239px) {
  section.unique-section .unique-box ul.unique-list li {
    max-width: 400px;
  }
}
@media (max-width: 1023px) {
  section.unique-section .unique-box ul.unique-list li {
    max-width: 360px;
  }
}
@media (max-width: 767px) {
  section.unique-section .unique-box ul.unique-list li {
    max-width: 100%;
  }
}
section.unique-section .unique-box ul.unique-list li:first-child {
  border-top: none;
}
section.unique-section .unique-box ul.unique-list li h4 {
  font-weight: 300;
  margin: 0;
}
@media (max-width: 1459px) {
  section.unique-section .unique-box ul.unique-list li h4 {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  section.unique-section .unique-box ul.unique-list li h4 {
    position: relative;
    z-index: 9;
    background-color: rgba(52, 52, 52, 0.8);
  }
}
section.unique-section .unique-box ul.unique-list li h4 a {
  display: block;
  padding: 30px 30px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  line-height: 20px;
}
@media (max-width: 1459px) {
  section.unique-section .unique-box ul.unique-list li h4 a {
    padding: 20px;
  }
}
section.unique-section .unique-box ul.unique-list li .left-part {
  display: none;
}
@media (max-width: 1239px) {
  section.unique-section .unique-box ul.unique-list li .left-part {
    display: none !important;
  }
}
section.unique-section .unique-box ul.unique-list li .image-holder {
  position: absolute;
  left: 720px;
  top: 0;
  right: 100px;
  transform: rotate3d(0, 1, 0, 90deg);
  transition: all 0.36s ease-in-out;
  -moz-transition: all 0.36s ease-in-out;
  -webkit-transition: all 0.36s ease-in-out;
  -o-transition: all 0.36s ease-in-out;
}
@media (max-width: 1459px) {
  section.unique-section .unique-box ul.unique-list li .image-holder {
    left: 680px;
  }
}
@media (max-width: 1239px) {
  section.unique-section .unique-box ul.unique-list li .image-holder {
    left: 400px;
  }
}
@media (max-width: 1023px) {
  section.unique-section .unique-box ul.unique-list li .image-holder {
    left: 360px;
  }
}
@media (max-width: 767px) {
  section.unique-section .unique-box ul.unique-list li .image-holder {
    right: 0;
    left: 0;
  }
}
section.unique-section .unique-box ul.unique-list li .image-holder img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}
section.unique-section .unique-box ul.unique-list li .left-part {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: 200px;
  height: 100%;
  align-items: center;
  background-color: #242424;
  transform: rotate3d(0, 1, 0, 90deg);
  transition: all 0.36s ease-in-out;
  -moz-transition: all 0.36s ease-in-out;
  -webkit-transition: all 0.36s ease-in-out;
  -o-transition: all 0.36s ease-in-out;
}
section.unique-section .unique-box ul.unique-list li .left-part span {
  display: inline-block;
  width: 90px;
  height: 90px;
  text-align: center;
  line-height: 70px;
  color: #fff;
  border: 10px solid rgba(255, 255, 255, 0.3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 32px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  margin-right: 30px;
}
section.unique-section .unique-box ul.unique-list li .left-part a.cat-link {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  transform: rotate(-90deg);
}
section.unique-section .unique-box ul.unique-list li.active h4 a {
  color: #ffffff;
  padding-left: 70px;
  background-color: #353535;
}
section.unique-section .unique-box ul.unique-list li.active h4 a:before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 40px;
  width: 1px;
  background-color: #ffffff;
}
section.unique-section .unique-box ul.unique-list li.active h4 a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  width: 21px;
  height: 1px;
  background-color: #ffffff;
}
section.unique-section .unique-box ul.unique-list li.active .left-part {
  display: flex;
  transform: rotate3d(0, 1, 0, 0deg);
}
section.unique-section .unique-box ul.unique-list li.active .image-holder {
  transform: rotate3d(0, 1, 0, 0deg);
}
section.unique-section .unique-box .button-navigation-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 60px;
}
@media (max-width: 767px) {
  section.unique-section .unique-box .button-navigation-box {
    display: none !important;
  }
}
section.unique-section .unique-box .button-navigation-box a {
  width: 60px;
  height: 60px;
  color: #ffffff;
  text-align: center;
  border: 1px solid #353535;
}
section.unique-section .unique-box .button-navigation-box a span {
  font-size: 28px;
  line-height: 60px;
}
section.unique-section .unique-box .button-navigation-box a.prev-active {
  border-bottom: none;
}

/*-------------------------------------------------- */
/* team style
/*------------------------------------------------- */
section.team-section {
  padding: 130px 0;
}
section.team-section .team-box {
  padding-top: 10px;
}
section.team-section .team-post {
  position: relative;
}
@media (max-width: 1023px) {
  section.team-section .team-post {
    margin-bottom: 30px;
  }
}
section.team-section .team-post img {
  width: 100%;
  height: auto;
}
section.team-section .team-post .hover-team {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  background-color: rgba(60, 60, 60, 0.95);
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.team-section .team-post .hover-team ul.social-team {
  padding: 0;
  margin: 0 0 15px;
}
section.team-section .team-post .hover-team ul.social-team li {
  display: inline-block;
}
section.team-section .team-post .hover-team ul.social-team li a {
  display: inline-block;
  width: 42px;
  height: 42px;
  color: #ffffff;
  font-size: 15px;
  line-height: 42px;
  border: 1px solid #515151;
}
section.team-section .team-post .hover-team ul.social-team li a:hover {
  background-color: #3fa9f5;
  border-color: transparent;
}
section.team-section .team-post .hover-team h3 {
  display: inline-block;
  padding: 0 20px;
  position: relative;
}
section.team-section .team-post .hover-team h3:before {
  content: "";
  position: absolute;
  right: 100%;
  width: 500px;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  background-color: #3fa9f5;
}
section.team-section .team-post .hover-team h3:after {
  content: "";
  position: absolute;
  left: 100%;
  width: 500px;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  background-color: #3fa9f5;
}
@media (max-width: 1023px) {
  section.team-section .team-post .hover-team h3 {
    font-size: 20px;
  }
}
section.team-section .team-post .hover-team span {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 300;
}
section.team-section .team-post:hover .hover-team {
  opacity: 1;
}

/*-------------------------------------------------- */
/* Tabs, Collapse style
/*------------------------------------------------- */
section.tabs-collapse-section {
  padding: 130px 0;
  background: #363636 url("../upload/filmmakers/service-bg.jpg") center bottom no-repeat;
  background-size: cover;
}
section.tabs-collapse-section .nav-tabs {
  border-bottom: 1px solid #515151;
  border-top: 1px solid #515151;
}
section.tabs-collapse-section .nav-tabs li {
  width: 33.33333%;
  text-align: center;
  border-right: 1px solid #515151;
}
section.tabs-collapse-section .nav-tabs li:first-child {
  border-left: 1px solid #515151;
}
section.tabs-collapse-section .nav-tabs li button {
  width: 100%;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  padding: 14px 0;
  display: block;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
}
section.tabs-collapse-section .nav-tabs li button:hover {
  background-color: #3fa9f5;
  border-color: transparent;
}
section.tabs-collapse-section .nav-tabs .nav-item.show .nav-link,
section.tabs-collapse-section .nav-tabs .nav-link.active {
  background: #515151;
  color: #ffffff;
  border-color: #515151;
}
section.tabs-collapse-section .tab-content {
  border: 1px solid #515151;
  border-top: none;
}
@media (max-width: 1023px) {
  section.tabs-collapse-section .tab-content {
    margin-bottom: 30px !important;
  }
}
section.tabs-collapse-section .tab-content .tab-pane {
  padding: 30px;
}
@media (max-width: 767px) {
  section.tabs-collapse-section .tab-content .tab-pane {
    padding-bottom: 1px !important;
  }
}
section.tabs-collapse-section .tab-content .tab-pane img {
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  section.tabs-collapse-section .tab-content .tab-pane img {
    margin-bottom: 30px !important;
  }
}
section.tabs-collapse-section .tab-content .tab-pane p {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  section.tabs-collapse-section .tab-content .tab-pane p {
    margin-bottom: 30px !important;
  }
}
section.tabs-collapse-section .accordion-button {
  border: 1px solid #515151;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  background-color: transparent;
  border-radius: 0px !important;
  padding: 0;
  outline: none;
  box-shadow: none !important;
}
section.tabs-collapse-section .accordion-button i {
  float: left;
  display: inline-block;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  color: #ffffff;
  margin-left: -1px;
  margin-top: -1px;
  margin-bottom: -1px;
  background-color: #515151;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.tabs-collapse-section .accordion-button span {
  padding: 0 20px;
}
section.tabs-collapse-section .accordion-button:after {
  display: none;
}
section.tabs-collapse-section .accordion-button:not(.collapsed) i {
  background-color: #3fa9f5;
}
section.tabs-collapse-section .accordion-header {
  margin-bottom: 2px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
}
section.tabs-collapse-section .accordion-collapse {
  margin-bottom: 2px;
  border-width: 1px;
  border-color: #515151;
}
section.tabs-collapse-section .accordion-collapse .accordion-body {
  padding: 22px 30px;
}
section.tabs-collapse-section .accordion-collapse p {
  margin-bottom: 0;
}

/*-------------------------------------------------- */
/* Sidebar style
/*------------------------------------------------- */
.sidebar {
  padding-left: 10px;
}
@media (max-width: 767px) {
  .sidebar {
    padding-left: 0;
  }
}
.sidebar .sidebar-widget {
  margin-bottom: 50px;
}
.sidebar .sidebar-widget > h4 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.sidebar .sidebar-widget > h4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background: #3fa9f5;
}
.sidebar .sidebar-widget form#searchform {
  margin: 0;
}
.sidebar .sidebar-widget form#searchform input[type=text] {
  display: block;
  width: 100%;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  padding: 13px 20px;
  outline: none;
  background: transparent;
  border: 1px solid #2e2e2e;
  border-left: 3px solid #3fa9f5;
}
.sidebar .sidebar-widget form#searchform input[type=text]::placeholder {
  color: #ffffff;
}
.sidebar .sidebar-widget form#searchform button[type=submit] {
  background: transparent;
  border: none;
  outline: none;
  float: right;
  margin-top: -36px;
  font-size: 14px;
  margin-right: 15px;
  color: rgba(255, 255, 255, 0.7);
}
.sidebar .sidebar-widget.widget_categories ul, .sidebar .sidebar-widget.widget_archives ul {
  padding: 0;
  margin: 0;
}
.sidebar .sidebar-widget.widget_categories ul li, .sidebar .sidebar-widget.widget_archives ul li {
  display: block;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #2e2e2e;
}
.sidebar .sidebar-widget.widget_categories ul li a, .sidebar .sidebar-widget.widget_archives ul li a {
  color: #ffffff;
  font-size: 14px;
  display: block;
}
.sidebar .sidebar-widget.widget_categories ul li a:hover, .sidebar .sidebar-widget.widget_archives ul li a:hover {
  color: #3fa9f5;
}
.sidebar .sidebar-widget.widget_categories ul li a span, .sidebar .sidebar-widget.widget_archives ul li a span {
  display: inline-block;
  float: right;
  width: 26px;
  height: 26px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  line-height: 26px;
  border-radius: 5px;
  background: #3fa9f5;
}
.sidebar .sidebar-widget.widget_categories ul li:last-child, .sidebar .sidebar-widget.widget_archives ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.sidebar .sidebar-widget.widget_categories ul li:before, .sidebar .sidebar-widget.widget_archives ul li:before {
  content: "+";
  display: inline-block;
  background: #3fa9f5;
  color: #242424;
  font-size: 14px;
  line-height: 4px;
  text-indent: -1px;
  width: 5px;
  height: 4px;
  float: left;
  margin-top: 10px;
  margin-right: 16px;
}
.sidebar .sidebar-widget.widget_tag_cloud a {
  display: inline-block;
  padding: 6px 17px;
  font-size: 12px;
  color: #ffffff;
  border: 1px solid #2e2e2e;
  margin-right: 8px;
  margin-bottom: 13px;
}
.sidebar .sidebar-widget.widget_tag_cloud a:hover {
  background: #3fa9f5;
  border-color: transparent;
}
.sidebar .sidebar-widget .popular-widget ul {
  padding: 0;
  margin: 0;
}
.sidebar .sidebar-widget .popular-widget ul li {
  list-style: none;
  margin-bottom: 25px;
  border-bottom: 1px solid #2e2e2e;
  clear: both;
  min-height: 90px;
  padding-bottom: 25px;
}
.sidebar .sidebar-widget .popular-widget ul li:last-child {
  border-bottom: 0;
  padding-bottom: 0px;
  margin-bottom: 0;
}
.sidebar .sidebar-widget .popular-widget ul li img {
  float: left;
  width: 95px;
  height: 90px;
  object-fit: cover;
  object-position: center;
}
.sidebar .sidebar-widget .popular-widget ul li .side-content {
  margin-left: 115px;
  padding-top: 5px;
}
.sidebar .sidebar-widget .popular-widget ul li .side-content h4 {
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  text-transform: inherit;
  margin-bottom: 8px;
}
.sidebar .sidebar-widget .popular-widget ul li .side-content h4 a {
  color: #ffffff;
}
.sidebar .sidebar-widget .popular-widget ul li .side-content h4 a:hover {
  color: #3fa9f5;
}
.sidebar .sidebar-widget .popular-widget ul li .side-content span {
  display: inline-block;
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 300;
  opacity: 1;
}
.sidebar .sidebar-widget .popular-widget ul li .side-content span:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #3fa9f5;
  margin-right: 8px;
}
.sidebar .sidebar-widget .popular-widget ul li:last-child {
  margin-bottom: 0;
}

/*-------------------------------------------------- */
/* Single Post style
/*------------------------------------------------- */
section.single-post-section {
  padding: 140px 0;
}
section.single-post-section .post-thumbnail {
  margin-bottom: 30px;
}
section.single-post-section .post-thumbnail img {
  width: 100%;
  height: auto;
}
section.single-post-section .meta-list {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #313131;
}
section.single-post-section .post-content p {
  margin-bottom: 20px;
}
section.single-post-section .post-content p span.dropcap {
  display: inline-block;
  float: left;
  color: #ffffff;
  width: 56px;
  height: 50px;
  text-align: center;
  background: #3fa9f5;
  font-size: 34px;
  line-height: 50px;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-top: 6px;
}
section.single-post-section .post-content blockquote {
  color: #ffffff;
  font-size: 22px;
  line-height: 32px;
  position: relative;
  padding: 10px 0;
  padding-left: 90px;
  margin-top: 24px;
  margin-bottom: 24px;
  border-left: 5px solid #3fa9f5;
}
section.single-post-section .post-content blockquote:after {
  content: "“";
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 20px;
  margin-top: -18px;
  color: #ffffff;
  text-align: center;
  line-height: 80px;
  color: #ffffff;
  font-size: 80px;
  font-weight: 400;
}
section.single-post-section .post-content .tags-list {
  clear: both;
}
section.single-post-section .post-content ul.post-tags {
  padding: 15px 0 11px;
  margin: 40px 0;
  border-top: 1px solid #2e2e2e;
  border-bottom: 1px solid #2e2e2e;
}
section.single-post-section .post-content ul.post-tags li {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 4px;
}
section.single-post-section .post-content ul.post-tags li span {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  display: inline-block;
  margin-right: 3px;
}
section.single-post-section .post-content ul.post-tags li a {
  display: inline-block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  text-decoration: underline !important;
}
section.single-post-section .post-content ul.post-tags li a:hover {
  color: #3fa9f5;
}
section.single-post-section .post-content .author-box {
  padding: 30px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  border: 1px solid #2e2e2e;
  position: relative;
}
section.single-post-section .post-content .author-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  background: #3fa9f5;
}
section.single-post-section .post-content .author-box .image-holder {
  position: relative;
  z-index: 2;
  margin-right: 30px;
}
section.single-post-section .post-content .author-box .image-holder img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: center;
}
section.single-post-section .post-content .author-box p {
  margin-bottom: 0;
}

.comments-box {
  margin-bottom: 30px;
}
.comments-box h3 {
  margin-bottom: 22px;
}

.comments-box ul.comments-list {
  padding: 0;
  margin: 0;
}

.comments-box ul.comments-list > li {
  display: block;
  padding-top: 30px;
}

.comments-box ul.comments-list li .comment-box {
  display: flex;
}

.comments-box ul.comments-list li .comment-box .image-holder {
  position: relative;
  margin-right: 30px;
}

.comments-box ul.comments-list li .comment-box .image-holder:before {
  content: "";
  width: 6px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
  background-color: #3fa9f5;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.comments-box ul.comments-list li .comment-box .image-holder:after {
  content: "";
  width: 0;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #3fa9f5;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.comments-box ul.comments-list li .comment-box:hover .image-holder:before {
  height: 0;
}

.comment-content {
  margin-top: 10px;
}

.comments-box ul.comments-list li .comment-box:hover .image-holder:after {
  width: 100%;
}

.comments-box ul.comments-list li .comment-box .image-holder img {
  width: 200px;
  height: 215px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 769px) {
  .comments-box ul.comments-list li .comment-box .image-holder img {
    width: 140px;
    height: 140px;
  }
}
.comments-box ul.comments-list li .comment-box span.time {
  color: #ffffff;
  font-size: 14px;
  opacity: 0;
  font-weight: 300;
  margin-bottom: 5px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.comments-box ul.comments-list li .comment-box p {
  margin-bottom: 0;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.comments-box ul.comments-list li .comment-box:hover span.time,
.comments-box ul.comments-list li .comment-box:hover p {
  color: #ffffff;
  opacity: 1;
}

.comments-box ul.comments-list li .comment-box span.time i {
  display: inline-block;
  margin-right: 4px;
}

.comments-box ul.comments-list li .comment-box a.reply,
.comments-box ul.comments-list li .comment-box a.comment-reply-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 400;
  padding: 4px 10px;
  margin-top: 20px;
  border: 1px solid #2e2e2e;
}

.comments-box ul.comments-list li .comment-box a.reply:hover,
.comments-box ul.comments-list li .comment-box a.comment-reply-link:hover {
  background-color: #3fa9f5;
  border-color: transparent;
}

.comments-box ul.comments-list ul.children {
  padding-top: 30px;
}

.comments-box ul.comments-list ul.children > li {
  display: block;
  padding-top: 30px;
  margin-top: 50px;
  border-top: 1px solid #f7f4fb;
  padding-left: 30px;
}

@media (max-width: 769px) {
  .comments-box ul.comments-list ul.children > li {
    padding-left: 15px;
  }
}
.comments-box ul.comments-list li:first-child,
.comments-box ul.comments-list ul.children > li:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.comments-box #respond {
  margin-top: 30px;
}

#comment-form h3 a#cancel-comment-reply-link,
#respond h3 a#cancel-comment-reply-link {
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
}

#comment-form p.comment-notes,
#comment-form p.logged-in-as,
#comment-form p.comment-form-cookies-consent,
#respond p.comment-notes,
#respond p.logged-in-as,
#respond p.comment-form-cookies-consent {
  display: none;
}

#comment-form form,
#respond form {
  margin-top: 20px;
}

#comment-form .input-line,
#respond .input-line {
  margin-bottom: 30px;
  display: flex;
  padding-top: 6px;
  border-bottom: 1px solid #505050;
  align-items: center;
}

#comment-form .input-line:focus,
#respond .input-line:focus {
  border-bottom: 1px solid #ffffff;
}

#comment-form .input-line label,
#respond .input-line label {
  padding-bottom: 18px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  margin: 0;
  border-right: none;
}

#comment-form .input-line input[type=text],
#respond .input-line input[type=text] {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 20px 20px 20px;
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  border: none;
  background-color: transparent;
  font-weight: 400;
  margin: 0;
}

#comment-form .input-line input[type=text]::placeholder,
#respond .input-line input[type=text]::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#comment-form .input-line:last-child,
#respond .input-line:last-child {
  margin-bottom: 0;
}

#comment-form textarea,
#respond textarea {
  width: 100%;
  height: 118px;
  border: none;
  border-bottom: 1px solid #505050;
  outline: none;
  padding: 0 0 20px;
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  background-color: transparent;
  margin-bottom: 18px !important;
  margin-top: 10px;
}

@media (max-width: 768px) {
  #comment-form textarea,
#respond textarea {
    margin-top: 30px;
  }
}
#comment-form input[type=submit],
#respond input[type=submit] {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  padding: 17px 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 21px;
  font-weight: 700;
  text-transform: uppercase;
  background: #3d3d3d !important;
  margin: 0;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

#comment-form input[type=submit]:hover,
#respond input[type=submit]:hover {
  color: #ffffff;
  background-color: #3fa9f5 !important;
}

#respond p.form-submit {
  width: 50%;
  margin-top: -53px;
  float: right;
  padding-left: 15px;
  margin-bottom: 0;
  position: relative;
  opacity: 1;
  z-index: 2;
}

#respond p.form-submit.logged-in {
  width: 100%;
  float: none;
  padding: 0;
  margin-top: 0;
}

@media (max-width: 1023px) {
  #comment-form {
    margin-bottom: 40px;
  }
}

/*-------------------------------------------------- */
/* Single Project style
/*------------------------------------------------- */
section.single-project-section {
  padding: 140px 0;
}
@media (max-width: 1023px) {
  section.single-project-section {
    padding: 80px 0;
  }
}
@media (max-width: 767px) {
  section.single-project-section {
    padding: 40px 0;
  }
}
section.single-project-section .feature-image {
  position: relative;
  margin-bottom: 30px;
}
section.single-project-section .feature-image img {
  width: 100%;
  height: auto;
}
section.single-project-section .col-md-6 .feature-image {
  margin-left: 5px;
}
section.single-project-section .single-project-content {
  padding-bottom: 10px;
  margin-bottom: 40px;
  border-bottom: 1px solid #2e2e2e;
}
section.single-project-section .single-project-content h2 {
  font-size: 25px;
  margin-bottom: 25px;
}
section.single-project-section .single-project-content > .feature-image o {
  margin-top: 20px;
}
section.single-project-section .single-project-content .col-md-6 .project-content {
  margin-right: 5px;
}

.project-content ul.project-data-list {
    padding: 0;
    margin: 0 0 20px;
    text-align: justify;
}
.project-content ul.project-data-list li {
  display: block;
  border: 1px solid #3d3d3d;
  border-bottom: none;
}
.project-content ul.project-data-list li:last-child {
  border-bottom: 1px solid #3d3d3d;
}
.project-content ul.project-data-list li span {
  display: inline-block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 300;
  line-height: 50px;
}
.project-content ul.project-data-list li span.data-name {
  width: 150px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #3d3d3d;
  padding: 0 30px;
  margin-right: 30px;
}
.project-content p {
  margin-bottom: 20px;
}

ul.gallery-list {
  padding: 0;
  margin: 0 -40px 0 -1px;
  display: flex;
  flex-wrap: wrap;
}
ul.gallery-list li {
  width: 25%;
  padding-right: 40px;
  padding-left: 1px;
  margin-bottom: 40px;
}
@media (max-width: 1239px) {
  ul.gallery-list li {
    width: 33.3333%;
  }
}
@media (max-width: 1023px) {
  ul.gallery-list li {
    width: 50%;
  }
}
@media (max-width: 767px) {
  ul.gallery-list li {
    width: 100%;
  }
}
ul.gallery-list li a {
  display: block;
  overflow: hidden;
  margin: 0;
}
ul.gallery-list li a img {
  width: 100%;
  height: auto;
  max-width: none;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px, 0, 0) scale(1.12);
  transform: translate3d(-10px, 0, 0) scale(1.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
ul.gallery-list li a:hover img {
  opacity: 0.8;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

.hover-feature {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.hover-feature h2 {
  position: absolute;
  bottom: 40px;
  left: 40px;
  padding: 13px 25px;
  font-weight: 400;
  margin: 0 !important;
  background-color: #3fa9f5;
}
@media (max-width: 767px) {
  .hover-feature h2 {
    bottom: 0;
    left: 0;
    padding: 10px 15px;
    font-size: 18px;
  }
}
.hover-feature ul.project-data-list {
  width: 380px;
  float: right;
  margin-top: 40px;
  margin-right: 40px;
}
@media (max-width: 767px) {
  .hover-feature ul.project-data-list {
    margin-top: 0;
    margin-right: -6px;
  }
}
.hover-feature ul.project-data-list li {
  border-color: transparent !important;
}
.hover-feature ul.project-data-list li span {
  background-color: #3d3d3d !important;
  padding: 0 28px;
  width: 220px;
  display: inline-block;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 767px) {
  .hover-feature ul.project-data-list li span {
    line-height: 32px;
  }
}
.hover-feature ul.project-data-list li span.data-name {
  background-color: #242424 !important;
  margin-right: -3px;
  color: white;
}
.project-content {
    text-align: justify;
}

.video-column {
    text-align: center;
}

.video-column h4 {
    margin-bottom: 10px; /* Espacio entre el título y el video */
    font-size: 18px;
    text-align: center;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Espacio entre los videos */
}

.video-column iframe {
    width: 100%;
    height: 315px; /* Altura del iframe */
}

.single-project-content h1 {
    text-align: center;
    margin-bottom: 80px; /* Espacio debajo del h1 */
}


.learning-points {
    list-style-type: disc;
    padding-left: 20px;
    color: #FFFFFF; /* Cambia el color si es necesario */
}

.learning-points li {
    margin-bottom: 10px; /* Espacio entre cada punto */
}
/*-------------------------------------------------- */
/* Services style
/*------------------------------------------------- */
section.services-section {
  padding: 130px 0;
  background-color: #242424;
}
section.services-section .services-box .services-post {
  border: 1px solid #3d3d3d;
  text-align: center;
  padding: 0 30px;
}
@media (max-width: 1023px) {
  section.services-section .services-box .services-post {
    margin-bottom: 30px;
  }
}
section.services-section .services-box .services-post i {
  display: inline-block;
  width: 95px;
  height: 82px;
  background-color: #3d3d3d;
  line-height: 82px;
  font-size: 39px;
  margin-bottom: 25px;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
section.services-section .services-box .services-post h4 {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 18px;
  text-transform: uppercase;
}
section.services-section .services-box .services-post p {
  margin-bottom: 25px;
}
section.services-section .services-box .services-post:hover i {
  background-color: #3fa9f5;
  font-size: 26px;
}

section.services-section2 {
  padding: 90px 0;
  background: #2e2e2e url("../upload/misión y visión/misión y visión_bg.jpg") center bottom no-repeat;
  background-size: cover;
}
section.services-section2 .services-box2 .services-post2 {
  border: 1px solid #393939;
  display: flex;
  margin-bottom: 30px;
}
section.services-section2 .services-box2 .services-post2 .icon {
  width: 47%;
  background-color: #393939;
  justify-content: center;
  line-height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
section.services-section2 .services-box2 .services-post2 .serv-content {
  width: 53%;
  padding: 35px;
}
section.services-section2 .services-box2 .services-post2 span {
  display: inline-block;
  width: 124px;
  height: 124px;
  line-height: 124px;
  font-size: 60px;
  text-align: center;
  color: #ffffff;
  border: 1px solid #4c4c4c;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
section.services-section2 .services-box2 .services-post2 h4 {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 18px;
  text-transform: uppercase;
}
section.services-section2 .services-box2 .services-post2 p {
  margin-bottom: 0;
}
section.services-section2 .services-box2 .services-post2:hover span {
  background-color: #3fa9f5;
  border-color: transparent;
  font-size: 40px;
}

section.services-section3 {
  padding: 130px 0;
  background-color: #242424;
}
section.services-section3 .services-box3 .col-lg-4 {
  margin-right: -1px;
}
section.services-section3 .services-box3 .services-post3 {
  border: 1px solid #3d3d3d;
  text-align: center;
  padding: 60px;
}
@media (max-width: 1023px) {
  section.services-section3 .services-box3 .services-post3 {
    margin-bottom: 30px;
  }
}
section.services-section3 .services-box3 .services-post3 i {
  display: inline-block;
  font-size: 50px;
  margin-bottom: 25px;
  color: #ffffff;
}
section.services-section3 .services-box3 .services-post3 h4 {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 18px;
  text-transform: uppercase;
}
section.services-section3 .services-box3 .services-post3 p {
  margin-bottom: 0;
}

section.services-section4 .services-box4 {
  display: flex;
}
@media (max-width: 1023px) {
  section.services-section4 .services-box4 {
    flex-wrap: wrap;
  }
}
section.services-section4 .services-box4 .services-post4 {
  width: 33.3333%;
  text-align: center;
  display: flex;
  flex-direction: column;
}
section.services-section4 .services-box4 .services-post4:nth-child(2n) {
  flex-direction: column-reverse;
}
@media (max-width: 1023px) {
  section.services-section4 .services-box4 .services-post4 {
    width: 100%;
  }
  section.services-section4 .services-box4 .services-post4:nth-child(2n) {
    flex-direction: column;
  }
}
section.services-section4 .services-box4 .services-post4 img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
section.services-section4 .services-box4 .services-post4 .serv-content {
  height: 400px;
  background-color: #2d2d2d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
}
section.services-section4 .services-box4 .services-post4 span {
  display: inline-block;
  width: 98px;
  height: 98px;
  line-height: 98px;
  font-size: 40px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 30px;
  border: 2px solid #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
section.services-section4 .services-box4 .services-post4 h4 {
  margin-bottom: 12px;
}
section.services-section4 .services-box4 .services-post4 p {
  margin-bottom: 0;
}
section.services-section4 .services-box4 .services-post4:hover span {
  background-color: #3fa9f5;
  border-color: transparent;
  font-size: 30px;
}

section.services-section5 {
  padding: 130px 0 100px;
  background-color: #242424;
}
section.services-section5 .services-box5 .services-post5 {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
section.services-section5 .services-box5 .services-post5 div.icon {
  width: 120px;
  height: 120px;
  border: 1px solid #2e2e2e;
  text-align: center;
  margin-right: 30px;
  position: relative;
}
section.services-section5 .services-box5 .services-post5 div.icon:before, section.services-section5 .services-box5 .services-post5 div.icon:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
section.services-section5 .services-box5 .services-post5 div.icon:before {
  top: 0;
  left: 0;
  border-top: 2px solid #6c6c6c;
  border-left: 2px solid #6c6c6c;
}
section.services-section5 .services-box5 .services-post5 div.icon:after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #6c6c6c;
  border-right: 2px solid #6c6c6c;
}
section.services-section5 .services-box5 .services-post5 span {
  display: inline-block;
  font-size: 40px;
  width: 118px;
  height: 118px;
  margin-bottom: 25px;
  color: #ffffff;
  line-height: 120px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
section.services-section5 .services-box5 .services-post5 h4 {
  font-weight: 400;
  margin-bottom: 12px;
}
section.services-section5 .services-box5 .services-post5 p {
  margin-bottom: 0;
  padding-right: 20px;
}
section.services-section5 .services-box5 .services-post5:hover span {
  background-color: #3fa9f5;
  font-size: 30px;
}
section.services-section5 .services-box5 .services-post5:hover div.icon:before,
section.services-section5 .services-box5 .services-post5:hover div.icon:after {
  width: 100%;
  height: 100%;
  border-color: rgba(255, 255, 255, 0.3);
}

section.services-section6 {
  padding-bottom: 130px;
}
section.services-section6 .services-box6 .services-post6 {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
section.services-section6 .services-box6 .services-post6 div.icon {
  width: 116px;
  height: 116px;
  background: #3d3d3d;
  text-align: center;
  margin-right: 30px;
  position: relative;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.services-section6 .services-box6 .services-post6 span {
  display: inline-block;
  font-size: 40px;
  width: 116px;
  height: 116px;
  margin-bottom: 25px;
  color: #ffffff;
  line-height: 120px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.services-section6 .services-box6 .services-post6 h4 {
  font-weight: 400;
  margin-bottom: 12px;
}
section.services-section6 .services-box6 .services-post6 p {
  margin-bottom: 0;
  padding-right: 20px;
}
section.services-section6 .services-box6 .services-post6:hover div.icon {
  background-color: #3fa9f5;
}
section.services-section6 .services-box6 .services-post6:hover span {
  font-size: 30px;
}
section.services-section6 .image-holder {
  padding-right: 40px;
  position: relative;
}
section.services-section6 .image-holder img {
  width: 100%;
  height: auto;
}
section.services-section6 .image-holder a.serv-link {
  display: inline-block;
  padding: 7px 10px 5px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  border: 1px solid #2e2e2e;
  position: relative;
  font-size: 19px;
  position: absolute;
  top: 55px;
  right: -56px;
  transform: rotate(-90deg);
}
section.services-section6 .image-holder a.serv-link i {
  margin-left: 8px;
}
section.services-section6 .image-holder a.serv-link:hover {
  background-color: #3fa9f5;
  border-color: transparent;
}

section.services-section7 {
  padding-bottom: 130px;
}
section.services-section7.no-padd-bottom {
  padding-bottom: 0;
}
section.services-section7 .services-box7 a.services-post7 {
  display: flex;
  padding: 36px;
  border: 1px solid #3d3d3d;
  margin-bottom: 30px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
section.services-section7 .services-box7 a.services-post7 i {
  color: #ffffff;
  font-size: 44px;
  margin-right: 16px;
}
section.services-section7 .services-box7 a.services-post7 div.serv-cont h4 {
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 600;
}
section.services-section7 .services-box7 a.services-post7 div.serv-cont p {
  margin-bottom: 0 !important;
}
section.services-section7 .services-box7 a.services-post7:before {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 60px;
  height: 60px;
  background: #3d3d3d;
  transform: rotate(-45deg);
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.services-section7 .services-box7 a.services-post7:after {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #ffffff;
  font-size: 12px;
  position: absolute;
  bottom: 4px;
  right: 7px;
}
section.services-section7 .services-box7 a.services-post7:hover:before {
  background-color: #3fa9f5;
}

section.services-section8 {
  padding: 130px 0;
}
section.services-section8 .services-post8 img {
  width: 100%;
  height: auto;
}
section.services-section8 .services-post8 .serv-cont {
  padding: 30px;
  background-color: #3d3d3d;
  position: relative;
}
section.services-section8 .services-post8 .serv-cont p {
  font-size: 13px;
  margin-bottom: 0;
}
section.services-section8 .services-post8 .serv-cont a {
  color: #ffffff;
  font-size: 26px;
  text-align: center;
  line-height: 75px;
  width: 75px;
  height: 75px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border-top-right-radius: 0px;
  background-color: #3d3d3d;
  position: absolute;
  top: -37px;
  right: 0;
  transition: all 0.36 ease-in-out;
  -moz-transition: all 0.36 ease-in-out;
  -webkit-transition: all 0.36 ease-in-out;
  -o-transition: all 0.36 ease-in-out;
}
section.services-section8 .services-post8:hover .serv-cont a {
  right: 40px;
  transform: rotate(360deg);
  background-color: #3fa9f5;
  border-top-right-radius: 50%;
}

section.services-section9 {
  padding: 130px 0 80px;
  background-color: #242424;
}
section.services-section9 .services-box9 .services-post9 {
  margin-bottom: 50px;
  display: flex;
  align-items: center;
}
section.services-section9 .services-box9 .services-post9 div.icon {
  width: 110px;
  height: 110px;
  border: 10px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  margin-right: 30px;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
section.services-section9 .services-box9 .services-post9 span {
  display: inline-block;
  font-size: 40px;
  width: 90px;
  height: 90px;
  margin-bottom: 25px;
  color: #ffffff;
  line-height: 90px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
section.services-section9 .services-box9 .services-post9 h4 {
  margin-bottom: 12px;
}
section.services-section9 .services-box9 .services-post9 p {
  margin-bottom: 0;
  padding-right: 20px;
}
section.services-section9 .services-box9 .services-post9:hover div.icon {
  background: #3fa9f5;
  border-color: transparent;
}
section.services-section9 .services-box9 .services-post9:hover div.icon span {
  font-size: 30px;
}

section.services-section10 {
  padding: 50px 0;
  background-color: #242424;
}

/*-------------------------------------------------- */
/* Footer style
/*------------------------------------------------- */
footer.template-footer {
  position: relative;
}
footer.template-footer div.instagram-line {
  border-top: 1px solid #2e2e2e;
}
footer.template-footer div.instagram-line ul.insta-list {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
footer.template-footer div.instagram-line ul.insta-list li {
  display: block;
  float: left;
  width: 12.5%;
  border: none;
}
@media (max-width: 1023px) {
  footer.template-footer div.instagram-line ul.insta-list li {
    width: 25%;
  }
}
footer.template-footer div.instagram-line ul.insta-list li a {
  display: block;
}
footer.template-footer div.instagram-line ul.insta-list li a img {
  width: 100%;
  height: auto;
}
footer.template-footer div.instagram-line ul.insta-list li a:hover {
  opacity: 0.7;
}
footer.template-footer div.widget-part-area {
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) {
  footer.template-footer div.widget-part-area {
    flex-wrap: wrap;
  }
  footer.template-footer div.widget-part-area .footer-widget-line:first-child {
    display: none;
  }
}
footer.template-footer div.widget-part-area .footer-widget-line {
  width: 25%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 90px;
  border-left: 1px solid #242424;
  background: #1f1f1f;
}
@media (max-width: 1239px) {
  footer.template-footer div.widget-part-area .footer-widget-line {
    padding-left: 30px;
    min-height: 360px;
  }
}
@media (max-width: 1023px) {
  footer.template-footer div.widget-part-area .footer-widget-line {
    width: 33.3333%;
  }
}
@media (max-width: 767px) {
  footer.template-footer div.widget-part-area .footer-widget-line {
    width: 100%;
    min-height: 40px;
    padding: 30px;
    border-left: none;
    border-bottom: 1px solid #242424;
  }
}
footer.template-footer div.widget-part-area .footer-widget-line .image-widget {
  text-align: center;
  margin-left: -90px;
  margin-right: -1px;
}
footer.template-footer div.widget-part-area .footer-widget-line .image-widget img {
  max-width: 84px;
  margin: 0 auto;
}
footer.template-footer div.widget-part-area .footer-widget-line h5 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 300;
  margin: 0 0 25px;
  text-transform: uppercase;
}
footer.template-footer div.widget-part-area .footer-widget-line ul.custom-list {
  padding: 0;
  margin: 0;
}
footer.template-footer div.widget-part-area .footer-widget-line ul.custom-list li {
  display: block;
}
footer.template-footer div.widget-part-area .footer-widget-line ul.custom-list li a {
  color: #ffffff;
  font-size: 15px;
  line-height: 30px;
  text-decoration: underline !important;
}

a.go-top {
  position: absolute;
  top: -90px;
  right: 30px;
  width: 60px;
  height: 60px;
  color: #ffffff;
  font-size: 30px;
  line-height: 60px;
  text-align: center;
  background: #3fa9f5;
}
a.go-top:hover {
  opacity: 0.8;
}
@media (max-width: 1023px) {
  a.go-top {
    display: none;
  }
}

/*-------------------------------------------------- */
/* Video Style
/*------------------------------------------------- */
body {
    margin: 0;
    font-family: 'Arial', sans-serif; /* Ajusta la fuente según sea necesario */
}

.feature-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente en dispositivos móviles */
    align-items: center;
    justify-content: center;
    padding: 20px; /* Añade un espacio alrededor del contenedor en dispositivos móviles */
}

.feature-image {
    overflow: hidden;
    margin-bottom: 20px; /* Espacio entre la imagen y el video */
}

.feature-image img {
    width: 100%;
    height: auto;
    display: block;
}

.feature-video {
    width: 100%;
    max-width: 1280px;
    height: auto;
}

.feature-video2 {
    width: 100%;
    max-width: 720px;
    height: auto;
}

.feature-video3 {
        max-width: 100%;
        position: relative;
        padding-bottom: 56.25%; /* Proporción 16:9 */
        height: 0;
        overflow: hidden;
}

.feature-video3 video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

/*-------------------------------------------------*/
/* =  Responsive Part
/*-------------------------------------------------*/
@media (max-height: 800px) {
  header .header-line div.social-line {
    padding: 15px 0;
    height: calc(100vh - 300px);
  }
  header .header-line div.social-line.active {
    height: calc(100vh - 400px);
  }
  header .header-line div.copyright-line {
    height: 200px;
  }
}

@media only screen and (max-width: 767px) {
    .feature-video {
        width: 100%; /* Ajustar el ancho al 100% del contenedor padre */
    }
}

/*# sourceMappingURL=style.css.map */

/*!
Template Name: Edutics - Education HTML Template
Author: temptics pro
Version: 1.0

-----------------------------------------------------------------------------------
Front End is Developed By Shaikh Abu Amer on bahalf of temptics pro
-----------------------------------------------------------------------------------


CSS INDEX
=================== 
01. CUSTOM PROPERTIES
02. GLOBAL
03. Components
04. Header
05. Courses

*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  --ed-blue: #241442;
  --ed-purple: #5B3AEE;
  --ed-yellow: #F8BC24;
  --ed-gray: #4F536C;
  --ed-gray2: #445375;
  --black: #000;
  --white: #fff;
  --font-poppins: "Poppins", sans-serif;
}

body {
  font-family: var(--font-poppins);
}

a,
button,
img,
svg path {
  transition: 0.4s ease;
}

p {
  line-height: 1.75;
}

.ed-btn {
  background-color: var(--ed-purple);
  color: var(--white);
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 20px;
  font-weight: 500;
  text-transform: uppercase;
}
.ed-btn:hover {
  background-color: var(--ed-blue);
}

.ed-section-sub-title {
  font-weight: 600;
  color: var(--ed-purple);
  text-transform: uppercase;
  padding-right: 10px;
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
  letter-spacing: 1.5px;
}
.ed-section-sub-title::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: 10px;
  width: 48px;
  background: linear-gradient(90deg, rgb(91, 58, 238) 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 8px, rgb(91, 58, 238) 8px, rgb(91, 58, 238) 13px, rgba(255, 255, 255, 0) 13px, rgba(255, 255, 255, 0) 18px, rgba(255, 255, 255, 0) 18px, rgb(91, 58, 238) 0);
}
.ed-section-sub-title--white {
  color: var(--white);
}
.ed-section-sub-title--white::before {
  background: linear-gradient(90deg, rgb(255, 255, 255) 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 8px, rgb(255, 255, 255) 8px, rgb(255, 255, 255) 13px, rgba(255, 255, 255, 0) 13px, rgba(255, 255, 255, 0) 18px, rgba(255, 255, 255, 0) 18px, rgb(255, 255, 255) 0);
}

.ed-section-title {
  font-weight: 600;
  font-size: 45px;
  color: var(--ed-blue);
  text-transform: capitalize;
  line-height: 1.29;
}
@media screen and (max-width: 1599px) {
  .ed-section-title {
    font-size: 40px;
  }
}
@media screen and (max-width: 1399px) {
  .ed-section-title {
    font-size: 35px;
  }
}
@media screen and (max-width: 1199px) {
  .ed-section-title {
    font-size: 32px;
  }
}
@media screen and (max-width: 575px) {
  .ed-section-title {
    font-size: 28px;
  }
}
@media screen and (max-width: 479px) {
  .ed-section-title {
    font-size: 25px;
  }
}

.ed-single-accordion-item {
  transition: 0.4s ease;
}

.ed-single-accordion-item.open .ed-single-accordion-item__header i {
  transform: rotate(90deg);
  color: var(--ed-purple);
}
.ed-single-accordion-item.open .ed-single-accordion-item__title {
  color: var(--ed-purple);
}
.ed-single-accordion-item.open .ed-single-accordion-item__body {
  grid-template-rows: 1fr;
  padding-top: 9px;
}

.ed-single-accordion-item__header i {
  transition: transform 0.4s ease;
}

.ed-single-accordion-item__body {
  transition: all 0.4s ease;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
}

.ed-single-accordion-item__body p {
  overflow: hidden;
}

@media screen and (max-width: 1199px) {
  .ed-header-nav {
    width: 100%;
  }
}
.ed-header-nav a {
  display: block;
  line-height: 3;
  font-weight: 500;
  color: var(--ed-blue);
}
@media screen and (max-width: 1199px) {
  .ed-header-nav a {
    border-bottom: 1px solid rgba(79, 83, 108, 0.2);
    padding-bottom: 6px;
    padding: 11px 20px;
    line-height: 1.8;
  }
}
.ed-header-nav a:hover {
  color: var(--ed-purple);
}
.ed-header-nav .has-sub-menu {
  display: grid;
  grid-template-rows: max-content 0fr;
  transition: 0.4s ease;
}
.ed-header-nav .has-sub-menu:hover .ed-header-submenu {
  transform: translateY(0) translateX(-50%);
  opacity: 1;
  pointer-events: all;
}
@media screen and (max-width: 1199px) {
  .ed-header-nav .has-sub-menu:hover .ed-header-submenu {
    transform: translateY(0) translateX(0);
  }
}
@media screen and (max-width: 1199px) {
  .ed-header-nav .has-sub-menu.active {
    grid-template-rows: max-content 1fr;
  }
}
.ed-header-nav .has-sub-menu.active > a {
  margin-bottom: 0;
}
.ed-header-nav .has-sub-menu.active .ed-header-submenu {
  transform: translateY(0) translateX(-50%);
  opacity: 1;
  border-color: #ddd;
  pointer-events: all;
}
@media screen and (max-width: 1199px) {
  .ed-header-nav .has-sub-menu.active .ed-header-submenu {
    transform: translateY(0) translateX(0);
  }
}
.ed-header-submenu {
  position: absolute;
  min-width: 200px;
  background-color: var(--white);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.03);
  top: 100%;
  left: 50%;
  opacity: 0;
  transform: translateY(10px) translateX(-50%);
  transition: 0.4s ease, pointer-events 0s;
  pointer-events: none;
  width: max-content;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1199px) {
  .ed-header-submenu {
    position: static;
    transform: translateY(0) translateX(0);
    opacity: 1;
    width: 100%;
    overflow: hidden;
    box-shadow: none;
    background-color: #f3f3f3;
  }
}
.ed-header-submenu.active {
  transform: translateY(0) translateX(-50%);
  opacity: 1;
}
.ed-header-submenu a {
  padding: 14px 20px;
  border-bottom: 1px solid #ddd;
  line-height: 1;
}
.ed-header-submenu li:last-child a {
  border-bottom: 0;
}
.ed-header-search.active .ed-header-search-open-btn {
  color: var(--ed-Lpink);
}
.ed-header-search.active form {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.ed-header-search form {
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s ease;
}
@media screen and (max-width: 1199px) {
  .ed-header-search form {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
}
.ed-header--2 .ed-header-nav > li > a {
  color: var(--white);
}
.ed-header--2 .ed-header-nav > li > a:hover {
  color: var(--ed-yellow);
}
.ed-header--2.to-be-fixed.ed-sticky {
  background-color: var(--ed-blue);
  inset: auto;
  border-radius: 0;
  width: 100%;
  z-index: 222;
}

.ss-main {
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  flex-shrink: 0;
  width: max-content;
}
@media screen and (max-width: 1199px) {
  .ss-main {
    border-color: rgba(0, 0, 0, 0.2);
  }
}
.ss-main:focus {
  box-shadow: none;
}
.ss-main .ss-arrow path {
  stroke: var(--white);
}
@media screen and (max-width: 1199px) {
  .ss-main .ss-arrow path {
    stroke: var(--ed-blue);
  }
}
.ss-main .ss-values .ss-placeholder {
  color: var(--white);
}
@media screen and (max-width: 1199px) {
  .ss-main .ss-values .ss-placeholder {
    color: var(--ed-blue);
  }
}

.ss-content .ss-list .ss-option {
  color: rgba(255, 255, 255, 0.8);
  padding: 12px 10px;
}

.ss-content.ss-open-below {
  padding: 0;
}
.ss-content.ss-open-below::before {
  content: none;
}

.to-be-fixed.ed-sticky {
  position: fixed;
  top: 0;
  background-color: var(--white);
  inset: 0 100px auto 100px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1176470588);
}
@media screen and (max-width: 1599px) {
  .to-be-fixed.ed-sticky {
    inset: 0 30px auto 30px;
  }
}
@media screen and (max-width: 1399px) {
  .to-be-fixed.ed-sticky {
    inset: 0 0 auto 0;
  }
}

.ed-sidebar.active > * {
  transform: translateX(0);
}

.mixitup-control-active {
  background-color: var(--ed-purple);
  color: var(--white);
}

.ed-countdown .number {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}

.ed-course-details-tab-navs button.active {
  background-color: var(--ed-purple);
  color: var(--white);
}
.ed-course-details-tabs .ed-tab {
  overflow: hidden;
  opacity: 0;
  height: 0;
  pointer-events: none;
}
.ed-course-details-tabs .ed-tab.active {
  opacity: 1;
  height: auto;
  pointer-events: all;
}/*# sourceMappingURL=style.css.map */