/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

 #header {
    opacity:0;
    transform: translateY(-45px);
 }

.lineStagger {
    opacity:0;
}
 .line {
	display: block;
	position: relative;
	overflow: hidden;
    width:100%;
    min-width:100%;
}

.hidden-text {
	position: relative;
	z-index: 5;
    opacity:0;
    transform: translateY(100%);
}

.line.revealed {
    height: auto !important;
    overflow: visible;
    /*background: #999;*/
}
  
 .line.revealed .hidden-text {
    transform: none;
    opacity: 1;
  }

/*
  textFlip efekt
  ------------------------------- */
  [class*=header-menu] {
    height:auto!important;
}

.textFlip {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.textFlip .text {
  display: inline-block;
  position: relative;
}
.textFlip .text span {
    opacity:0;
}

.textFlip .text::before,
.textFlip .text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  transition: all 0.3s ease;
  color:inherit;
}

.textFlip .text::before {
  top: 0;
}

.textFlip .text::after {
  top: 100%;
  opacity:0;
}

.textFlip:hover .text::before,
.gspb-buttonbox:hover .textFlip .text::before {
  top: -100%;
  opacity:0;
}

.textFlip:hover .text::after,
.gspb-buttonbox:hover .textFlip .text::after {
  top: 0%;
  opacity:1;
}


/**
* Column Expansion with Hover Effect (CSS only)
*/
.maxiColExpan,
.maxiColExpan * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.maxiColExpan {
    display: flex;
    width:100%;
    max-width:100%;
    height:100vh;
  }

  .maxiColExpan-column {
    position: relative;
    flex: 1;
    overflow: hidden;
    transition: flex 0.5s ease;
    cursor: pointer;
  }

  .maxiColExpan-column:hover {
    flex: 1.7;
  }

  .maxiColExpan-column img {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover!important;
    filter: brightness(0.6)!important;
    transition: transform 0.4s ease!important;
  }

  .maxiColExpan-column:hover img {
    transform: scale(1.15)!important;
  }

  .maxiColExpan-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #fff;
    transform: translateY(20px);
    transition: all 0.4s ease;
  }

  .maxiColExpan-column:hover .maxiColExpan-content {
    opacity: 1;
    transform: translateY(-40px);
  }

  .maxiColExpan-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .maxiColExpan-desc {
    opacity: 0;
    height:0;
    font-size: 1rem;
    max-width: 300px;
    line-height: 1.5;
    color: #ccc;
    transition:all 0.2s ease;
  }
.maxiColExpan-column:hover .maxiColExpan-desc {
opacity:1;
}