/* ------------------------- Components ® Code by Dennis -------------------------------------------------- */

/* ------------------------- Photo/Video BG -------------------------------------------------- */

.video-bg.video {
   position: absolute;
   width: 100%;
   height: 100vh;
   top: 0;
   left: 0;
   overflow: hidden;
   background: transparent;
   pointer-events: none;
   transition: var(--animation-primary);
}

.video-bg.video .video-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: block;
   height: 0;
   width: 100%;
   padding: 0;
   padding-bottom: 56.25%;
}

.video-bg.video .video-wrapper iframe {
   height: 100%;
   height: calc(100% + 5px);
   width: 101%;
   position: absolute;
   top: -5px;
   left: -0.5%;
   bottom: 0;
   pointer-events: none;
}

.video-thumbnail {
   position: absolute;
   top: -10%;
   left: 0;
   width: 100%;
   height: 110%;
   background: var(--primary);
   opacity: 1;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform, opacity;
}

.video-bg.loaded .video-thumbnail {
   opacity: 0;
   transition: all 1.2s ease-in-out;

}

.video-overlay {
   background: rgba(58, 11, 34, .5);
   opacity: 1;
   background: linear-gradient(90deg, rgba(85, 7, 45, .98) 0%, rgba(85, 7, 45, .5) 100%);
}

@media screen and (max-width: 540px){

   .comp-header.v2 .video-bg {
      height: calc((var(--vh, 1vh) * 100) - (var(--nav-padding) + (2 * var(--viewport-padding))) * 2);
   }

   .video-bg.video {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   .video-bg.video .video-wrapper {
      display: none;
   }

   .video-bg.loaded .video-thumbnail {
      opacity: 1 !important;
   
   }

}

/* ------------------------- Header -------------------------------------------------- */

.comp-header {
   background: transparent;
   position: relative;
   display: block;
   overflow: hidden;
}

.comp-header .container .row:nth-child(1) {
   padding-right: 30%;
   padding-top: 1em;
}

.comp-header .btn {
   margin-top: 2.5em;
}

@media screen and (max-width: 1000px){
   .comp-header .container .row:nth-child(1) {
      padding-right: 20%;
   }
}

@media screen and (max-width: 700px){
   .comp-header .container .row:nth-child(1) {
      padding-right: 0%;
      padding-top: 0em;
   }
}

/* ------------------------- Header V3 -------------------------------------------------- */

.comp-header.full-height.v3 {
   align-items: flex-end;
}

.comp-header.v3 .video-overlay {
   background: rgba(58, 11, 34, 0.7);
   opacity: 1;
   background: linear-gradient(0deg, rgba(101, 11, 54, .8) 0%, rgba(101, 11, 54, 0.3) 66%, rgba(101, 11, 54, .5) 100%);
}

@media screen and (max-width: 540px){
   .comp-header.full-height.v3 {
      min-height: calc(var(--vh, 1vh) * 60);
   }
}

/* ------------------------- Header V1 -------------------------------------------------- */

.comp-header.v1 .container .row:nth-child(1) {
   padding-top: 3.5em;
}

/* ------------------------- Header V2 -------------------------------------------------- */

.comp-header.v2 .video-bg {
   width: 70vw;
   left: 30vw;
   top: calc(var(--nav-padding) + (2 * var(--viewport-padding)));
   height: calc(100vh - (var(--nav-padding) + (2 * var(--viewport-padding))) * 2);
}

.comp-header.v2 .video-overlay {
   background: rgba(58, 11, 34, 0.7);
   opacity: 1;
   background: linear-gradient(90deg, rgba(101, 11, 54, .7) 0%, rgba(101, 11, 54, .2) 100%);
}

@media screen and (min-width: 2200px){

   .comp-header.v2 .video-bg {
      width: 65vw;
      left: 35vw;
   }

}

@media screen and (max-width: 540px){

   .comp-header.v2 .video-bg {
      height: calc((var(--vh, 1vh) * 100) - (var(--nav-padding) + (2 * var(--viewport-padding))) * 2);
   }

}


/* ------------------------- Pattern Top -------------------------------------------------- */

.pattern-top {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   pointer-events: none;
   height: 100vh;
}

.pattern-top svg {
   position: absolute;
   display: block;
   width: 100%;
   top: 50%;
   transform: translateY(-50%) rotate(0.0001deg);
   opacity: 0.1;
}

@media screen and (max-width: 540px){ 
   .pattern-top {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      overflow: hidden;
   }

   .pattern-top svg {
      width: auto;
      height: 90%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0.0001deg);
      opacity: 0.15;
   }
}

/* ------------------------- Pattern Page -------------------------------------------------- */

.pattern-page {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   pointer-events: none;
   height: 100vh;
}

.pattern-page svg {
   position: absolute;
   display: block;
   width: 100%;
   top: 50%;
   transform: translateY(-50%) rotate(0.0001deg);
   opacity: 0.1;
}

@media screen and (max-width: 540px){ 
   .pattern-top {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }
}


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

.slider {
   outline: 0;
   outline-width: 0px !important;
   outline-offset: 0px;
   border-radius: 0;
   border: 0;
}


/* ------------------------- Comp Title + Text -------------------------------------------------- */

.comp-title-text .row .flex-col{
   width: 50%;
   width: calc(50% - (var(--gap-padding) * 1));
}

.comp-title-text .row .flex-col:nth-child(1){
   margin-right: calc(var(--gap-padding) * 2);
}

@media screen and (max-width: 1000px){ 

   .comp-title-text .row {
      padding-bottom: 1.5em;
   }

   .comp-title-text .row .flex-col{
      width: 100%;
   }

   .comp-title-text .row .flex-col:nth-child(1){
      margin-right: 0;
   }

   .comp-title-text .row h2 {
      margin-bottom: .5em;
   }
}



/* ------------------------- Single Blog Item -------------------------------------------------- */

.single-blog-item {
   display: block;
   position: relative;
   width: 100%;
}

.single-blog-item .image {
   display: block;
   position: relative;
   background: var(--primary-dark);
   overflow: hidden;
}

.single-blog-item .image .overlay-image {
   transition: var(--animation-primary);
   transform: scale(1.1) rotate(0.001deg);
}

.single-blog-item:hover .image .overlay-image {
   transform: scale(1) rotate(0.001deg);
}

.single-blog-item .image::before {
   display: block;
   content: "";
   padding-top: 108%;
}

.single-blog-item .image-content {
   display: flex;
   position: relative;
   padding-top: var(--gap-padding);
   justify-content: center;
   flex-wrap: wrap;
}

.single-blog-item .read-button {
   position: absolute;
   bottom: calc(var(--gap-padding) * -1.5);
   color: var(--white);
   text-align: center;
   font-size: 1em;
   opacity: 0;
   visibility: hidden;
   transition: var(--animation-primary);
   pointer-events: none;
}

.single-blog-item:hover .read-button {
   opacity: 1;
   visibility: visible;
}

.single-blog-item .read-button svg {
   margin-left: 0.4em;
   width: .8em;
   transform: rotate(45deg);
   transition: var(--animation-primary);
}

.single-blog-item:hover .read-button svg {
   transform: rotate(-45deg);
}

/* ------------------------- Comp Image Split -------------------------------------------------- */

.comp-image-split .row {
   align-items: center;
}

.comp-image-split .row .flex-col{
   width: 50%;
}

.comp-image-split .row .flex-col:nth-child(1){
   padding-right: var(--gap-padding);
}

.comp-image-split .row .flex-col:nth-child(2){
   padding-left: var(--gap-padding);
}

.comp-image-split .row .flex-col .image-wrap{
   display: block;
   position: relative;
   background: var(--primary-dark);
   overflow: hidden;
}

.comp-image-split .row .flex-col .image-wrap::before {
   display: block;
   content: "";
   padding-top: 100%;
}

.comp-image-split .overlay-image {
   height: 115%;
   top: -15%;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform;
}

.comp-image-split .icon-svg-wrap {
   left: 50%;
   left: calc(50% - (var(--gap-padding) / 2));
}

/* Flip */

.comp-image-split.flip .row .flex-col:nth-child(1){
   padding-left: var(--gap-padding);
   padding-right: 0;
}

.comp-image-split.flip .row .flex-col:nth-child(2){
   padding-left: 0;
   padding-right: var(--gap-padding);
   order: 1;
}

@media screen and (max-width: 1000px){ 
   .comp-image-split .row .flex-col{
      width: 40%;
   }

   .comp-image-split .row .flex-col:nth-child(2){
      padding-left: calc(var(--gap-padding) * 1);
      width: 60%;
   }
}

@media screen and (max-width: 720px){ 
   .comp-image-split .row .flex-col{
      width: 100%;
   }

   .comp-image-split .row .flex-col:nth-child(2){
      padding-left: 0;
      padding-top: calc(var(--gap-padding) * 2);
      width: 100%;
   }

   .comp-image-split .icon-svg-wrap {
      bottom: 5vw;
      left: auto;
      right: 5vw;
      transform: translate(0, 0) rotate(0.001deg);
      width: 6em;
      height: 6em;
   }

   /* Flip */

   .comp-image-split.flip .row .flex-col:nth-child(1){
      padding-left: 0;
      padding-top: calc(var(--gap-padding) * 2);
   }

   .comp-image-split.flip .row .flex-col:nth-child(2){
      padding-left: 0;
      padding-right: 0;
      order: 1;
      padding-top: 0;
   }
}

/* ------------------------- Comp Big Image -------------------------------------------------- */

.comp-big-image {
   padding: 0;
}

.comp-big-image .container {
   padding-left: 0;
}

.comp-big-image.right .container {
   padding-left: 0;
   padding-right: 0;
}

.comp-big-image .row .flex-col .image-wrap{
   display: block;
   position: relative;
   background: var(--primary-dark);
   overflow: hidden;
}

.comp-big-image .row .flex-col .image-wrap::before {
   display: block;
   content: "";
   padding-top: 25%;
}

.comp-big-image .overlay-image {
   height: 115%;
   top: -15%;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform;
}

@media screen and (max-width: 1000px){ 
   .comp-big-image .row .flex-col .image-wrap::before {
      padding-top: 33%;
   }
   
}

@media screen and (max-width: 540px){ 
   .comp-big-image .row .flex-col .image-wrap::before {
      padding-top: 50%;
   }

   .comp-big-image .container {
      padding-left: 0;
   }

   .comp-big-image.right .container {
      padding-right: 0;
   }
   
}


/* ------------------------- Section - Just Padding -------------------------------------------------- */

.section-just-padding-medium {
   padding-top: 0;
   padding-bottom: var(--section-padding-medium);
}

@media screen and (max-width: 540px){ 
   .section-just-padding-medium {
      padding-bottom: var(--section-padding);
   }
}