/* Animation */

.cursor {
    position: relative;
    width: 100%;
    margin: 0 auto;
    /*border-right: 2px solid rgba(255,255,255,.75);*/
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}

.typewriter-animation {
    animation: typewriter 3s steps(10) 0.5s 1 normal both, blinkingCursor 500ms steps(50) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blinkingCursor {
    from {
        border-right-color: rgba(255, 255, 255, .75);
    }
    to {
        border-right-color: transparent;
    }
}


/*on hover*/

.split-link {
    position: relative;
    display: inline-block;
    padding: 0;
    line-height: 1em;
    margin: 0;
}

.split-link--top {
    position: absolute;
    color: #111;
    top: 0;
    display: inline-block;
    clip-path: polygon(0% 66%, 0% 0%, 100% 0%, 100% 40%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, color 0.5s ease 0.22s;
}

.split-link--top:after {
    content: "";
    position: absolute;
    top: 36%;
    left: 0;
    width: 100%;
    height: 4%;
    background: #111;
    transform: rotateZ(-2.2deg) scaleX(0%);
    transform-origin: right top;
    transition: transform 0.2s ease 0.22s;
}

.split-link--bottom {
    display: inline-block;
    clip-path: polygon(0% 65%, 100% 40%, 100% 110%, 0% 110%);
    text-decoration: underline;
    color: #111;
    transition: color 0.5s ease 0.22s, background-position 0.2s ease 0.22s;
    text-decoration: none;
    background-size: 200% 8%;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, #111 50%, transparent 50%);
}


/*Can't use this type of underscore for multiple lines of text :( 
  Good for menu buttons though, this would use a transform animation instead of a background position animation, better performance :)
  .split-link--bottom:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8%;
    background: red;
    transform-origin: left bottom;
    transition: transform 0.2s ease;
  }
  
  .split-link:hover .split-link--bottom:before {
    transform: scaleX(0%);
  }
  */

.split-link--bottom:after {
    content: "";
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 4%;
    background: #111;
    transform: rotateZ(-2deg) scaleX(0%);
    transform-origin: right top;
    transition: transform 0.2s ease 0.22s;
}

.split-link:hover .split-link--top {
    color: #111;
    transform: translateY(-0.5em) rotateZ(-3deg);
    transition: transform 0.5s cubic-bezier(.12, .8, .57, 1.00) 0.42s, color 0.5s ease 0.22s;
}

.split-link:hover .split-link--bottom {
    color: #111;
    background-position: 100% bottom;
    transition: color 0.5s ease 0.2s, background-position 0.2s ease;
}

.split-link:hover .split-link--top:after {
    top: 62%;
    transform-origin: left top;
    transform: rotateZ(-2.2deg) scaleX(100%);
}

.split-link:hover .split-link--bottom:after {
    top: 65%;
    transform-origin: left top;
    transform: rotateZ(-2.1deg) scaleX(100%);
}


/**galeria**/

.mansonry-portfolio {
    columns: 4;
    column-gap: 1.5rem;
}

.mansonry-item {
    display: block;
    width: 100%;
    margin-bottom: 3rem;
    img {
        width: 100%;
        border-radius: 0px;
        transition: .5s ease all;
    }
    img:hover {
        border-radius: 15px;
        transform: scale(0.9);
        z-index: 999;
        -webkit-box-shadow: 0px 10px 26px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 26px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 26px 0px rgba(0, 0, 0, 0.75);
    }
}


/**Carrusel*/

@media (min-width: 768px) {
    /* show 4 items */
    .carousel-inner .active,
    .carousel-inner .active+.carousel-item,
    .carousel-inner .active+.carousel-item+.carousel-item,
    .carousel-inner .active+.carousel-item+.carousel-item+.carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item+.carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* last visible item + 1 */
    .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .active.carousel-item-left+.carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left+.carousel-item,
    .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item,
    .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item,
    .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-next.carousel-item-left {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right+.carousel-item,
    .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item,
    .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item,
    .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        display: block;
        visibility: visible;
    }
}

.fmd-strong {
    font-weight: bold;
}

.fmd-title {
    font-size: 22px !important;
}


/**body effect*/

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }
    25% {
        transform: translateX(-25%);
    }
    50% {
        transform: translateX(-50%);
    }
    75% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(1);
    }
}

.preloader {
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    background: #bda64d;
}


/* block-$ */

.block-effect {
    font-size: calc(8px + 6vw);
}

.block-reveal {
    --t: calc(var(--td) + var(--d));
    color: transparent;
    padding: 4px;
    position: relative;
    overflow: hidden;
    animation: revealBlock 0s var(--t) forwards;
}

.block-reveal::after {
    content: '';
    width: 0%;
    height: 100%;
    padding-bottom: 4px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bc);
    animation: revealingIn var(--td) var(--d) forwards, revealingOut var(--td) var(--t) forwards;
}


/* animations */

@keyframes revealBlock {
    100% {
        color: #0f0f0f;
    }
}

@keyframes revealingIn {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes revealingOut {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

.abs-site-link {
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: hsla(0, 0%, 0%, .6);
    font-size: 16px;
}

.overlaypreloader {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background-color: #ffbd44 !important;
}


/**Cube 3d*/

svg.svgloader {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.stroke-still {
    stroke: #232323;
}

.stroke-animation {
    -webkit-animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
    animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

@-webkit-keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@-webkit-keyframes stroke-color {
    0% {
        stroke: RGB(249, 169, 97);
    }
    24% {
        stroke: RGB(183, 62, 38);
    }
    25% {
        stroke: RGB(249, 169, 97);
    }
    49% {
        stroke: RGB(249, 169, 97);
    }
    50% {
        stroke: RGB(243, 117, 74);
    }
    74% {
        stroke: RGB(243, 117, 74);
    }
    75% {
        stroke: RGB(244, 188, 71);
    }
    99% {
        stroke: RGB(244, 188, 71);
    }
}

@keyframes stroke-color {
    0% {
        stroke: RGB(249, 169, 97);
    }
    24% {
        stroke: RGB(183, 62, 38);
    }
    25% {
        stroke: RGB(249, 169, 97);
    }
    49% {
        stroke: RGB(249, 169, 97);
    }
    50% {
        stroke: RGB(243, 117, 74);
    }
    74% {
        stroke: RGB(243, 117, 74);
    }
    75% {
        stroke: RGB(244, 188, 71);
    }
    99% {
        stroke: RGB(244, 188, 71);
    }
}

#mixedSlider {
    position: relative;
}

#mixedSlider .MS-content {
    white-space: nowrap;
    overflow: hidden;
    margin: 0 5%;
}

#mixedSlider .MS-content .item {
    display: inline-block;
    width: 33.3333%;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    height: 100%;
    white-space: normal;
    padding: 0 10px;
}

@media (max-width: 991px) {
    #mixedSlider .MS-content .item {
        width: 50%;
    }
}

@media (max-width: 767px) {
    #mixedSlider .MS-content .item {
        width: 100%;
    }
}

#mixedSlider .MS-content .item .imgTitle {
    position: relative;
}

#mixedSlider .MS-content .item .imgTitle .blogTitle {
    margin: 0;
    text-align: left;
    letter-spacing: 2px;
    color: #252525;
    font-style: italic;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    bottom: 0;
    font-weight: bold;
    padding: 0 0 2px 10px;
}

#mixedSlider .MS-content .item .imgTitle img {
    height: auto;
    width: 100%;
}

#mixedSlider .MS-content .item p {
    font-size: 16px;
    margin: 2px 10px 0 5px;
    text-indent: 15px;
}

#mixedSlider .MS-content .item a {
    float: right;
    margin: 0 20px 0 0;
    font-size: 16px;
    font-style: italic;
    color: rgba(173, 0, 0, 0.82);
    font-weight: bold;
    letter-spacing: 1px;
    transition: linear 0.1s;
}

#mixedSlider .MS-content .item a:hover {
    text-shadow: 0 0 1px grey;
}

#mixedSlider .MS-controls button {
    position: absolute;
    border: none;
    background-color: transparent;
    outline: 0;
    font-size: 50px;
    top: 95px;
    color: rgba(0, 0, 0, 0.4);
    transition: 0.15s linear;
}

#mixedSlider .MS-controls button:hover {
    color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 992px) {
    #mixedSlider .MS-controls button {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    #mixedSlider .MS-controls button {
        font-size: 20px;
    }
}

#mixedSlider .MS-controls .MS-left {
    left: 0px;
}

@media (max-width: 767px) {
    #mixedSlider .MS-controls .MS-left {
        left: -10px;
    }
}

#mixedSlider .MS-controls .MS-right {
    right: 0px;
}

@media (max-width: 767px) {
    #mixedSlider .MS-controls .MS-right {
        right: -10px;
    }
}

#basicSlider {
    position: relative;
}

#basicSlider .MS-content {
    white-space: nowrap;
    overflow: hidden;
    margin: 0 2%;
    height: 50px;
}

#basicSlider .MS-content .item {
    display: inline-block;
    width: 20%;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    height: 100%;
    white-space: normal;
    line-height: 50px;
    vertical-align: middle;
    min-width: 200px !important;
    min-height: 150px !important;
}

@media (max-width: 991px) {
    #basicSlider .MS-content .item {
        width: 25%;
    }
}

@media (max-width: 767px) {
    #basicSlider .MS-content .item {
        width: 35%;
    }
}

@media (max-width: 500px) {
    #basicSlider .MS-content .item {
        width: 50%;
    }
}

#basicSlider .MS-content .item a {
    line-height: 50px;
    vertical-align: middle;
}

#basicSlider .MS-controls button {
    position: absolute;
}

#basicSlider .MS-controls .MS-left {
    top: 35px;
    left: 10px;
}

#basicSlider .MS-controls .MS-right {
    top: 35px;
    right: 10px;
}