html { 
    overflow-x: hidden; 
}

/* TYPOGRAPHY */
body {
    -webkit-font-smoothing: antialiased;
}

a {
    color: rgba(68,68,68,1);
}

p {
    text-align: justify;
    line-height: 30px;
}

li {
    line-height: 30px;
}


a:hover, a:visited {
    color: rgba(68,68,68,1);
}

ul li a {
    text-decoration: none;
}

h1 {
    font-weight: 500;
    margin: 0 0 0.67em 0;
}

h2, h3, h4, h5, h6 {
    font-weight: 500;
}

.site-title a {
    text-decoration: none;
    font-size: 2rem;
    font-weight: 600;
}

blockquote {
    border-left: 5px solid #eee;
    padding: 10px 20px;
}

ul, ol {
    margin: 0 0 1.5em 0;
}

/* LAYOUT */

.site-header {
    padding: 1.5em 5% 7.5em 5%;
}

.site-branding {
    height: 100%;
    display: inline-block;
    position: inherit;
    top: 1.8em;
    left: 5%;
}

.content-area {
    margin: 0 5%;
}

.content-area.single-works{
    margin: 0;
}

.site-title {
    margin-top: 0;
}
article:last-child {
    margin-bottom: 0;
}

/* work 2x1 flex grid*/
/* https://jsfiddle.net/2pixels/dwetczk8/11/ */

.works-wrapper { /* flex-container */
    display: -ms-flexbox;
    display:  -webkit-flex;
    display: flex;
    
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
/*    padding: 0.5em 0 0 0;*/
}

.works-wrapper .work { /* flex-item */
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0 0 7% 0;
}

.works-wrapper .work img {
    width: 100%;
    display: block;
}

/*responsive flex grid*/
/*
@media (min-width: 410px) {
.works-wrapper .work  {
    width: 50%;
    max-width: 50%;
  }
}
@media (min-width: 620px) {
.works-wrapper .work  {
    max-width: calc(33.33333% - 10px);
  }
}
@media (min-width: 830px) {
.works-wrapper .work  {
    max-width: calc(25% - 10px);
  }
}
@media (min-width: 1040px) {
.works-wrapper .work  {
    max-width: calc(20% - 10px);
  }
}
@media (min-width: 1250px) {
.works-wrapper .work  {
    max-width: calc(16.66667% - 10px);
  }
}
@media (min-width: 1460px) {
.works-wrapper .work {
    max-width: calc(14.28571% - 10px);
  }
}
@media (min-width: 1670px) {
.works-wrapper .work  {
    min-width: calc(12.5% - 10px);
  }
    }
*/


/*figure effects - https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/*/

/* Common style */
 figure {
     position: relative;
     line-height: 1.5em;
     margin: 0;
     text-align: center;
     cursor: pointer;

}
/*
 figure:hover {
    -webkit-transition: all 0.75s cubic-bezier(0, 1, 0.5, 1);
    transition: all 0.75s cubic-bezier(0, 1, 0.5, 1);
     transform: scale(0.98); 
}
*/

/*
 figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}
*/

 figure figcaption {
	padding: 2em;
	color: #fff;
	font-size: 1em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
    display: flex;
    justify-content: center; 
    align-items: center;
    text-align: center;
}

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

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

 figure figcaption > h2 > a {
    text-decoration: none;
    color: #404040;
    
    background-color: #ffffff;
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
    box-shadow: 0 0 0px 4px #ffffff;
    box-decoration-break: clone;
    line-height: 1.5em;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
 figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

 figure h2 {
	word-spacing: -0.15em;
    position: relative;
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
}

 figure h2 span {
	font-weight: 800;
}

 figure h2,
 figure p {
	margin: 0;
}

 figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}   


/*
figure.effect-ruby {
    background-color: #bad5dc;
}
*/

figure.effect-ruby h2 {
/*
    position: absolute;
    top: 43%;
    left:50%;
*/
    font-size: 1.2em;
   
/*
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
*/
}


/*responsive*/
@media screen and (min-width: 37.5em) { /* 600px mobile */

    ul, ol {
        margin: 0 0 1.5em 3em;
    }
    
    .site-branding {
        top: 0;
        left: 0;
        margin: 8% 0 0 6%;
    }
    
    /*flex-item*/
    .works-wrapper .work { 
        width: 50%;
        max-width: 50%;
        padding: 0;
        
/*    padding: 0 10% 10% 0; 
/*        nem ment FF-ben*/

    }
        
    figure {
        margin: 0 1% 1% 0;
        text-align: left;
    }

    figure.post-thumbnail {
        margin: 0 20% 20% 0;
    }
    
    figure figcaption {
        align-items: flex-end;
        padding-bottom: 15%;
    }

    /*---------------*/
    /***** Ruby *****/
    /*---------------*/

    /*
    figure.effect-ruby {
        background-color: #17819c;
    }
    */

    figure.effect-ruby img {
    /*	opacity: 0.7;*/
/*
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s; 
*/
        -webkit-transition: all 0.75s cubic-bezier(0, 1, 0.5, 1);
        transition: all 0.75s cubic-bezier(0, 1, 0.5, 1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    figure.effect-ruby:hover img {
        opacity: 0.5;
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }

    figure.effect-ruby h2 {
        position: absolute;
        /*top: 43%;*/
        left: -55px;
        text-align: left;
        font-size: 1.5em;
        /* margin-top: 20%; */
        -webkit-transition: -webkit-all 0.35s;
        transition: all 0.35s;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition: all 1s cubic-bezier(0, 1, 0.5, 1);
        transition: all 1s cubic-bezier(0, 1, 0.5, 1);
        opacity: 0;
    }

    figure.effect-ruby:hover h2 {
        opacity: 1;
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
}

/* test, debug */

.red {
    background-color: red;
}

/* no */

.noscroll {
    position: fixed;
    overflow-y: scroll;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

/* menu toggle */
.menu-toggle {
    z-index: 9;
}

.menu-top-menu-container {
    padding: 30px 0;
}

.main-navigation {
    width: inherit;
}

.main-navigation ul {
    display: -ms-flexbox;
    display:  -webkit-flex;
    display: flex;
    flex-direction: column-reverse;
    padding:0;
    margin: 0;
    position: relative;
    list-style-type: none;
}

.main-navigation li {
    font-size: 1.5625em;
    line-height: 3em;
    font-weight: 300;
}

.main-navigation .flyout {
    z-index: 10;
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -340px;
    background: #fff;
    width: 90%;
    max-width: 340px;
    opacity: 1;
    box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0), 0px 0 100px 10px rgba(0, 0, 0, 0);
    transform: translate(0, 0);
    transition: transform 0.3s cubic-bezier(.55, 0, .1, 1) ,box-shadow 0.4s cubic-bezier(.55, 0, .1, 1);
}

.main-navigation .flyout {
    padding: 2.2em 5%;
    text-align: right;
}

.main-navigation .flyout.toggled {
    box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.2), 0px 0 100px 10px rgba(0, 0, 0, 0.4);
    transform: translate(-340px, 0);

}

.flyout .flyout-header, .flyout .flyout-footer {
    display: inline-block;
}

/* SVG ICONS */

h1.site-title a{
    display: none!important;
}

header h1.logo svg.standard {
    opacity: 0
}

header h1.logo #logo-anim-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0)
}

header h1.logo {
/*    display: none;*/
    width: 178px;
    height: 130px;
    position: absolute;
    overflow: hidden;
}

header h1.logo svg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%)
}

header h1.logo a {
    text-decoration: none;
    height: 100%;
    width: 100%;
    position: absolute;
    display: block
}

header h1.logo strong {
    text-indent: -99999em;
    font-size: 1px;
}


.icon-menu {
    cursor: pointer;
    position: absolute;
    
    top: 1.8em;
    right: 5%;
    
    width: 40px;
    height: 40px;
    
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='24' viewBox='0 0 34 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Eicon/menu%3C/title%3E%3Cg fill='%239B9B9B' fill-rule='evenodd' opacity='.5'%3E%3Cpath d='M0 0h34v4H0zM0 10h34v4H0zM0 20h34v4H0z'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-menu-close {
    position: relative;
    width: 40px;
    height: 40px;
    
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eicon/close%3C/title%3E%3Cdefs%3E%3Ccircle id='a' cx='20' cy='20' r='20'/%3E%3Cmask id='b' x='0' y='0' width='40' height='40' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3C/defs%3E%3Cg stroke='%23444' fill='none' fill-rule='evenodd'%3E%3Cpath d='M26.162 14L13 27.668M26.68 27.668L13.52 14' stroke-width='2' stroke-linecap='square'/%3E%3Cuse mask='url%28%23b%29' stroke-width='4' xlink:href='%23a'/%3E%3C/g%3E%3C/svg%3E");
}
.icon-facebook {
    position: relative;
    width: 40px;
    height: 40px;
    
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='25' viewBox='0 0 11 25' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Esocial/facebook%3C/title%3E%3Cpath d='M11 8.097H7.254V5.5c0-.978.61-1.2 1.04-1.2h2.647V.015L7.3 0C3.254 0 2.333 3.193 2.333 5.24v2.857H0v4.414h2.334V25h4.92V12.51h3.315L11 8.098z' fill='%23444' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* RESPONSIVE */
@media screen 
and (min-width: 37.5em) 
and (orientation : landscape) { /* > 600px */
    .content-area.single-works {        
        margin: 14% 0 0 0;
    }
}

@media screen 
and (max-width: 37.5em) 
and (orientation : landscape) { /* < 600px */
}

/* spcial mobile view */
.is-landscape-mobile .site-header {
    display: none;
    margin: 0;
}

@media screen and (min-width: 37.5em) {
    .site-header {
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 266px;
        height: 100%;
    }
    
    header h1.logo {
        width: 170px;
        height: 130px;
        position: absolute;
        overflow: hidden;
    }

    .content-area {
        display: block;
        margin: 8% 10% 0 266px;
    }
    
    .content-area.archive-works {
        margin: 8% 0 0 266px;
    }
    
    
     #site-navigation.main-navigation .flyout {
        position: relative;
        background: initial;
        width: 100%;
        max-width: 340px;
        box-shadow: inherit;
        transform: translateX(0);
        transition: initial;
        right: inherit;
    }
    .flyout .flyout-header, .flyout .flyout-footer {
        display: none;
    }
    .main-navigation.toggled .flyout {
        box-shadow: initial;
    }

    .main-navigation .flyout {
        padding: 0;
        text-align: left;
        background: rgba(0,0,0,0);
    }
    
    /*noscroll*/
    .noscroll {
        position: initial;
        overflow-y: initial;
    }
    
    /*menu*/    
    #site-navigation.main-navigation {
/*        position: absolute;*/
        position: inherit;
        left: 6%;
        bottom: 3.5em;
        transform: rotate(-90deg);
        transform-origin: 0 0;
    }
    
     #site-navigation .menu-top-menu-container{
        /*order: 1px solid blue;*/
        display: block;
        padding: 0;
    }
    
     #site-navigation.main-navigation ul{
        flex-direction: inherit;
         
    }

     #site-navigation.main-navigation li {
        float: left;
    }
    
    #site-navigation.main-navigation li {
        font-size: 1.1rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: .05em;
    }
    
    #site-navigation.main-navigation li:before {
        content: '';
        display: inline-block;
        height: 1px;
        width: 55px;
        position: absolute;
        top: 0.8em;
        background: rgb(199, 199, 199);
        left: 20px;
        }
    
    #site-navigation.main-navigation li:first-child:before {
        content: '';
        display: none;
        height: 0;
        width: 0;
    } 
    
    #site-navigation.main-navigation li a {
        margin: 0 0 0 90px;
 
    }
    #site-navigation.main-navigation li:first-child a {
        margin: 0;
 
    }
    .site-footer { /*anim miatt van bekapcsolva*/
    margin: 4% 0 0 0;
    }
}

@media screen and (min-width: 64em) { /* 1024 */
    .site-header {
        width: 0;

    }

    .content-area {
        display: block;
        margin: 8% 23% 0 26%;
    }
    
    .content-area.archive-works {
        display: block;
        margin: 8% 0 0 26%;
    }
    
}


@media screen and (min-width: 90em) { /* 1440 */
        header h1.logo {
        width: 12vw;
        height: 9vw;
        position: absolute;
        overflow: inherit;
    }
}

/* ROYAL SLIDER */
.rsContent{
    overflow: visible;
}

.rsImg {
  object-fit: cover;
}

/* homepage */
.vnpHomepage .rsSlide {
    overflow: visible!important;       
}

.vnpHomepage .rsTextContent {
    position: absolute;
    bottom: 23%;
    text-align: left;
    width: calc(60% + 55px);
    
}

.vnpHomepage h2 {
    font-weight: 500;
    margin: 0;
    position: relative;
    line-height: 1.15em;
    font-size: 1.8em;
    transition: transform .5s cubic-bezier(0, 1, 0.5, 1);
    overflow: hidden;
}

.vnpHomepage h2 span.rsTextTitleLineContainer { 
    position: absolute;
    left: 55px;
}

.vnpHomepage h2 span.rsTextTitleLine { 
    display: inline-block;
    height: 1px;
    width: 0px;
    position: absolute;
    top: 0.59em;
    background: rgba(0, 0, 0, .25);
    left: -55px;
    -webkit-transition: width .9s .5s cubic-bezier(0, 1, 0.5, 1);
    transition: width .9s .5s cubic-bezier(0, 1, 0.5, 1);
}

.vnpHomepage h2 span.rsTextTitleLine.rsBeforeMove { 
    width: 0;
    -webkit-transition: width .2s cubic-bezier(0, 1, 0.5, 1);
    transition: width .2s cubic-bezier(0, 1, 0.5, 1);
}

  
.vnpHomepage h4 {
    font-size: 1em;
    line-height: 1.1em;
    overflow: hidden;
}

.vnpHomepage h2 span.rsTextTitle {
    display: inline;
    transform: translate3d( 0, 0, 0 );
    transition: transform .7s .2s cubic-bezier(0, 1, 0.5, 1), opacity .7s .2s cubic-bezier(0, 1, 0.5, 1); 
    /*when use line before*/
    /*padding-left: 65px*/
    background-color: #ffffff;
    box-decoration-break: clone;
    box-shadow: 10px 0 0 #ffffff;
}
.vnpHomepage h4 span {
    display: inline;
    transform: translate3d( 0, 0, 0 );
    transition: transform .5s .2s cubic-bezier(0, 1, 0.5, 1), opacity .5s .2s cubic-bezier(0, 1, 0.5, 1); 
    /*when use line before*/
    padding-left: 0px;
    letter-spacing: 0.1em;
    background-color: white;
    padding-right: 5px;
}

@media screen and (min-width: 37.5em) { /* 600px */
    
    .vnpHomepage .rsTextContent {
        position: absolute;
        bottom: 23%;
        /*when use line before*/
        left: -145px;
        width: calc(50% + 120px);    
    }
    
   .vnpHomepage .rsOverflow {
        overflow: visible!important;       
    }

    .vnpHomepage h2 {
        font-size: 4.5vw;
        padding-left: 65px;
    }    
    
    .vnpHomepage h4 {
        font-size: 1.2vw;
    }
    
    .vnpHomepage h4 span{
        padding-left: 65px;
    }


    .vnpHomepage h2 span.rsTextTitleLine { 
        width: 55px;
    }

}

@media screen and (min-width: 90em) { /* 1440 */
     .vnpHomepage h2 {
        font-size: 3.7vw;
    }
    
    .vnpHomepage h4 {
        font-size: 1vw;
    }
    
    .vnpHomepage .rsTextContent {
        width: calc(50% + 55px);    
    }
    
}


/* work */
.visibleNearbyZoom .rsSlide img {
    opacity: 0.1!important;
/*    -webkit-backface-visibility: hidden;*/
    -webkit-transition: opacity 0.3s ease-out!important;
    -moz-transition: opacity 0.3s ease-out!important;
    transition: opacity 0.3s ease-out!important;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1)!important;
    -ms-transform: scale(1)!important;
    -o-transform: scale(1)!important;
    transform: scale(1)!important;
}

.visibleNearbyZoom .rsActiveSlide img {
    opacity: 1!important;
}

.rsDefaultInv, .rsDefaultInv .rsOverflow, .rsDefaultInv .rsSlide, .rsDefaultInv .rsVideoFrameHolder, .rsDefaultInv .rsThumbs {
    background: none!important;
    color: #444!important;
}

.visibleNearbyZoom {
    padding-top: 0!important;
}

.visibleNearbyZoom .rsGCaption{
    color: #444!important;
    background: none!important; 
}

.rsContent {
    line-height: 14vw!important;
}

.vnpHomepage img.rsImg {
    max-width: 100%;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
}

@media screen and (min-width: 37.5em) {
    .rsContent {
        line-height: 0!important;
    }
}

/*WORK responsive*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /*Ipad in landscape*/
    .vnpWorks img.rsImg.rsMainSlideImage {
        width: 90%!important;
        margin-left: 5%!important;
    }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* Retina iPad in landscape */
    .vnpWorks img.rsImg.rsMainSlideImage {
        width: 90%!important;
        margin-left: 5%!important;
    }
}

@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1366px) 
and (orientation : landscape) { /*Ipad pro in landscape*/
    .vnpWorks img.rsImg.rsMainSlideImage {
/*
        width: 90%!important;
        margin-left: 5%!important;
*/
    }
}

/* WORK */
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
    display: none; /*!!!!! FONTOS ---------------------------*/
}




/* ANIMATION */

/* Smoothstate - Page transition */

.entry-content, .entry-header, .post-thumbnail {
    -webkit-transition: -webkit-transform .5s, opacity .5s;
    -ms-transition: -o-transform .5s, opacity .5s;
    -o-transition: -o-transform .5s, opacity .5s;
    transition: transform .5s, opacity .5s;
    opacity: 1;
    transform: translate3d( 0, 0, 0 );
}

.slide-out .entry-content, .slide-out .entry-header, .slide-out .post-thumbnail {
    -webkit-transform: translate3d( 0, -100px, 0 );
    -ms-transform: translate3d( 0, -100px, 0 );
    -o-transform: translate3d( 0, -100px, 0 );
    transform: translate3d( 0, -100px, 0 );
    opacity: 0;

}

.slide-in .entry-content, .slide-in .entry-header, .slide-in .post-thumbnail {
    -webkit-transform: translate3d( 0, 100px, 0 );
    -ms-transform: translate3d( 0, 100px, 0 );
    -o-transform: translate3d( 0, 100px, 0 );
    transform: translate3d( 0, 100px, 0 );
    opacity: 0;
}

/* WOW */
.image {
  overflow: hidden;
  display: inline-block;
  position: relative;
  -webkit-transition: opacity 0s 0.1s, -webkit-clip-path 1s cubic-bezier(0.7, 0.01, 0, 1);
  transition: opacity 0s 0.1s, -webkit-clip-path 1s cubic-bezier(0.7, 0.01, 0, 1);
  transition: clip-path 1s cubic-bezier(0.7, 0.01, 0, 1), opacity 0s 0.1s;
  transition: clip-path 1s cubic-bezier(0.7, 0.01, 0, 1), opacity 0s 0.1s, -webkit-clip-path 1s cubic-bezier(0.7, 0.01, 0, 1);
}
.image span {
  position: absolute;
  top: 25vh;
  left: 0;
  right: 0;
}
.image img {
  width: auto;
  height: auto;
  max-width: 50vw;
  max-height: 110vh;
  -webkit-transform: translate3d(-10%, 0, 0);
          transform: translate3d(-10%, 0, 0);
  -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.37, 0.01, 0, 1);
  transition: -webkit-transform 1.2s cubic-bezier(0.37, 0.01, 0, 1);
  transition: transform 1.2s cubic-bezier(0.37, 0.01, 0, 1);
  transition: transform 1.2s cubic-bezier(0.37, 0.01, 0, 1), -webkit-transform 1.2s cubic-bezier(0.37, 0.01, 0, 1);
  vertical-align: middle;
}

/* 2px wow - fadeInUpCustom */
@-webkit-keyframes fadeInUpCustom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpCustom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpCustom {
    -webkit-animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
    animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
    
    -webkit-animation-name: fadeInUpCustom;
    animation-name: fadeInUpCustom;
}


/* 2px wow - fadeInCustom */
@-webkit-keyframes fadeInCustom {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInCustom {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeInCustom {
    -webkit-animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
    animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
    
    -webkit-animation-name: fadeInCustom;
    animation-name: fadeInCustom;
}

/* 2px wow - transition anim */
@-webkit-keyframes transitionInLeftToRight {
  from {
    opacity: 0;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }

  to {
    opacity: 1;
    -webkit-clip-path: inset(0 0% 0 0);
    clip-path: inset(0 0% 0 0);
  }
}


@keyframes transitionInLeftToRight {
  from {  
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-10%, 0, 0);

    -webkit-animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
    animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
  }

  to {
    -webkit-clip-path: inset(0 0% 0 0);
    clip-path: inset(0 0% 0 0);
      transform: translate3d(0, 0, 0);
      
    -webkit-animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
    animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
  }
}
.transitionInLeftToRight {
    -webkit-animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
    animation-timing-function: cubic-bezier(0.37, 0.01, 0, 1);
    
    -webkit-animation: transitionInLeftToRight; /*12s cubic-bezier(0.37, 0.01, 0, 1);*/
    animation: transitionInLeftToRight; /*12s cubic-bezier(0.37, 0.01, 0, 1);*/
    
}

.image.in img {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}