/*optiscroll*/
.optiscroll{position:relative;overflow:hidden;}.optiscroll.is-enabled{overflow:hidden}.optiscroll-content{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;overflow:scroll;-webkit-overflow-scrolling:touch}.optiscroll-v,.optiscroll-h{position:absolute;visibility:hidden;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.optiscroll-v{right:0}.optiscroll-h{bottom:0}.optiscroll.has-vtrack>.optiscroll-v,.optiscroll.has-htrack>.optiscroll-h{visibility:visible}.optiscroll-vtrack,.optiscroll-htrack{display:block;position:absolute;opacity:1;-webkit-transform:translate(0%, 0%);-ms-transform:translate(0%, 0%);transform:translate(0%, 0%);transition:height 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s;box-sizing:border-box}.optiscroll-v{top:4px;bottom:4px;width:0}.optiscroll-h{left:4px;right:4px;height:0}.optiscroll.has-vtrack.has-htrack>.optiscroll-v{bottom:8px}.optiscroll.has-vtrack.has-htrack>.optiscroll-h{right:8px}.optiscroll-vtrack,.optiscroll-htrack{background:rgba(0,0,0,0.3);border-radius:2px;box-shadow:0 0 1px #FFF;opacity:0}.optiscroll-vtrack{width:3px;right:4px}.optiscroll-htrack{height:3px;bottom:4px}.optiscroll:hover>.optiscroll-v .optiscroll-vtrack,.optiscroll:hover>.optiscroll-h .optiscroll-htrack{opacity:1}


.ehover11 {
    background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
    background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}

.ehover11 img {
    max-width: none;
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
    transition: opacity 0.35s, transform 0.45s;
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
}

.ehover11 .overlay::before {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    border: 1px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
    transition: opacity 0.35s, transform 0.45s;
    -webkit-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
}

.ehover11 .overlay {
    padding: 3em;
    text-align: left;
}

.ehover11 h2 {
    background-color: transparent;
    padding: 15% 0 10px 0;
    text-align: left;
}

.ehover11 button.info {
    color: #FFF;
    opacity: 0;
    margin: 0px;
    padding: 0px;
    border: none;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
    transition: opacity 0.35s, transform 0.45s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
}


.ehover11:hover img {
    opacity: 0.6;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.ehover11:hover .overlay::before,
.ehover11:hover button.info {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}



/* effect hover 6 */

.ehover6 .rotate {
    transform: rotate(-45deg);
    width: 100%;
    height: 100%;
    position: absolute;
    /* production only due to the button, the line below is only needed for the demo site so the whole div can be a button for the modal to show, it is not needed in example code */
    bottom: 0px;
}

.ehover6 h1::before {
    content:"";
    width:0px;
    height:1px;
    background-color:rgba(255,255,255,.6);
    position:absolute;
    top:10px;
    left:50%;

}
.ehover6 h1::after {
    content:"";
    width:0px;
    height:1px;
    background-color:rgba(255,255,255,.6);
    position:absolute;
    bottom:10px;
    left:50%;

}

.ehover6 p {
    width: 30%;
    text-transform: none;
    font-size: 15px;
    line-height: 2;
}

.ehover6 p a {
    color: #fff;
}

.ehover6 p a:hover,
.ehover6 p a:focus {
    opacity: 0.6;
}

.ehover6  a i {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    padding: 10px;
    font-size: 20px;
}

.group1 a:first-child i {
    -webkit-transform: translate3d(-60px,-60px,0) rotate(45deg) scale(2);
    transform: translate3d(-60px,-60px,0) rotate(45deg) scale(2);
}

.group1 a:nth-child(2) i {
    -webkit-transform: translate3d(60px,-60px,0) rotate(45deg) scale(2);
    transform: translate3d(60px,-60px,0)  rotate(45deg) scale(2);
}

.group2 a:first-child i {
    -webkit-transform: translate3d(-60px,60px,0) rotate(45deg) scale(2);
    transform: translate3d(-60px,60px,0) rotate(45deg) scale(2);
}

.group2 a:nth-child(2) i {
    -webkit-transform: translate3d(60px,60px,0)  rotate(45deg) scale(2);
    transform: translate3d(60px,60px,0)  rotate(45deg) scale(2);
}

.ehover6:hover h1::before {
    width:90%;
    margin-left:-45%;
    -webkit-transition: all 0.35s, -webkit-transform 0.35s;
    transition: all 0.35s, transform 0.35s;
}
.ehover6:hover h1::after {
    width:90%;
    margin-left:-45%;
    -webkit-transition: all 0.35s, -webkit-transform 0.35s;
    transition: all 0.35s, transform 0.35s;
}

.ehover6:hover hr:nth-child(2) {
    opacity: 1;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(1,1,1);
    transform: translate3d(-50%,-50%,0) rotate(0deg) scale3d(1,1,1);
}

.ehover6:hover hr:nth-child(3) {
    opacity: 1;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(1,1,1);
    transform: translate3d(-50%,-50%,0) rotate(90deg) scale3d(1,1,1);
}

.ehover6:hover .group1 i:empty, .ehover6:hover .group2 i:empty {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0) rotate(45deg) scale(1);
    opacity: 1;
}

.ehover6 img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);;transition: all 0.4s;-moz-transition: all 0.4s;
    -o-transition: all 0.4s;-webkit-transition: all 0.4s;transition: all 0.4s;
}
.ehover6:hover img{
    transform: scale(1);
    filter: brightness(0.7);
    -webkit-filter: brightness(0.7);
}



.ehover1 img {
    transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

.ehover1 .overlay {
    opacity: 0;
    background-color: rgba(0,0,0, 0.5);
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.ehover1 h2 {
    -moz-transform: translatey(-100px);
    -ms-transform: translatey(-100px);
    -o-transform: translatey(-100px);
    -webkit-transform: translatey(-100px);
    transform: translatey(-100px);
    opacity: 0;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.ehover1:hover .new_img img {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.ehover1:hover .overlay {
    opacity: 1;
}

.ehover1:hover h2, .ehover1:hover button.info {
    opacity: 1;
    -moz-transform: translatey(0);
    -ms-transform: translatey(0);
    -o-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0);
    -webkit-transform: translatey(0);
}

.ehover1:hover button.info {
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
}



.la-ball-beat,.la-ball-beat>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-beat{display:block;font-size:0;color:#fff}.la-ball-beat.la-dark{color:#333}.la-ball-beat>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-beat{width:54px;height:18px}.la-ball-beat>div{width:10px;height:10px;margin:4px;border-radius:100%;-webkit-animation:ball-beat 0.7s -0.15s infinite linear;-moz-animation:ball-beat 0.7s -0.15s infinite linear;-o-animation:ball-beat 0.7s -0.15s infinite linear;animation:ball-beat 0.7s -0.15s infinite linear}.la-ball-beat>div:nth-child(2n-1){-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.5s}.la-ball-beat.la-sm{width:26px;height:8px}.la-ball-beat.la-sm>div{width:4px;height:4px;margin:2px}.la-ball-beat.la-2x{width:108px;height:36px}.la-ball-beat.la-2x>div{width:20px;height:20px;margin:8px}.la-ball-beat.la-3x{width:162px;height:54px}.la-ball-beat.la-3x>div{width:30px;height:30px;margin:12px}@-webkit-keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-beat{50%{opacity:.2;-moz-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-beat{50%{opacity:.2;-o-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);-moz-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}
.la-ball-beat.la-2x>div{width: 10px; height: 10px;margin: 0px; margin-left: 3px;}