.homepage .accordion-section{
    display: none;
}
.homepage .outer{
    opacity: 0.3;
    fill: #fff;
}
.homepage .inner{
    fill: #fff;
}
.homepage #blob-outer-1, .homepage #blob-inner-1{
    opacity: 0;
}
.homepage #inner-circle-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -67px;
    margin-left: -60px;
}
.homepage .overview .button-touch {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    text-decoration: none;
    color: #9d57a1;
    font-weight: 600;
    width: 120px;
    height: 120px;
    line-height: 120px;
}
.homepage .overview .button-wrap {
    position: relative;
    width: 120px;
    margin: auto;
}
.homepage .banner-text {
    position: absolute;
    z-index: 8;
/*    left: 50%;*/
/*    margin-left: -585px;*/
    padding-top: 250px;
    top: 0px;
    opacity: 1;
    left: 0;
    right: 0;
}
.homepage .overview.experience{
    padding: 0px;
    height: calc(100vh);
}
.homepage .overview.experience.animated {
     height: 700px;
     background-size: cover !important;
     -webkit-transition: height 1s ease-in-out 2s, background 1s ease-in-out;
     -moz-transition: height 1s ease-in-out 2s, background 1s ease-in-out;
     -o-transition: height 1s ease-in-out 2s, background 1s ease-in-out;
     transition: height 1s ease-in-out 2s, background 1s ease-in-out;
}
.homepage .hand-video-wrapper{
    position: relative;
}
.homepage .digital-text{
    position: absolute;
    top: 35%;
    margin-left: -585px;
/*    padding-top: 200px;*/
    left: 50%;
    z-index: 5;
    opacity: 0;
}
.homepage .overview.experience .hand-video-wrapper {
    position: relative;
    height: 100%;
    bottom: 0;
    /*transform: scale(7);*/
    /*transform-origin: 510px 392px;*/
    -webkit-transform-origin: calc(26vw) calc(66vh);
    -moz-transform-origin: calc(26vw) calc(66vh);
    -o-transform-origin: calc(26vw) calc(66vh);
    transform-origin: calc(26vw) calc(66vh);
    z-index: 7;
    overflow: hidden;
}
.homepage .overview.experience .hand-video-wrapper.small{
    -webkit-transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    -o-transition: all 2s ease-in-out 0s;
    transition: all 2s ease-in-out 0s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 510px 392px;
    -moz-transform-origin: 510px 392px;
    -o-transform-origin: 510px 392px;
    transform-origin: 510px 392px;
}
.homepage .banner-text.fadeout{
    -webkit-transition: opacity 2s ease-in-out 0.15s;
    -moz-transition: opacity 2s ease-in-out 0.15s;
    -o-transition: opacity 2s ease-in-out 0.15s;
    transition: opacity 2s ease-in-out 0.15s;
    opacity: 0;
}
.homepage .banner-text.fadeout-fast{
    -webkit-transition:  opacity 1s ease-in-out 0s;
    -moz-transition:  opacity 1s ease-in-out 0s;
    -o-transition:  opacity 1s ease-in-out 0s;
    transition: opacity 1s ease-in-out 0s;
    opacity: 0;
}
.homepage .hand-video-wrapper.shake{
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 4; 
}
.homepage .overview.experience .hand.smaller{
    -webkit-transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    -o-transition: all 2s ease-in-out 0s;
    transition: all 2s ease-in-out 0s;
    
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);

    -webkit-transform-origin: 39% center;
    -moz-transform-origin: 39% center;
    -o-transform-origin: 39% center;
    transform-origin: 39% center;
}
.homepage .overview.experience #hand{
    position: absolute;
    bottom: 0px;
    left: 2px;
    width: 100%;
    max-width: 1184px;
    z-index: 2;
    -webkit-transform: scale(8);
    -moz-transform: scale(8);
    -o-transform: scale(8);
    transform: scale(8);
    -webkit-transform: 44% center; /*39*/
    -moz-transform: 44% center;
    -o-transform: 44% center;
    transform-origin: 44% center;

    -webkit-transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    -o-transition: all 2s ease-in-out 0s;
    transition: all 2s ease-in-out 0s;
}
.homepage .experience.overview #video {
    background: url('../images/home-hero.jpg') no-repeat center center transparent;
    background-size: cover;
    border-radius:10px;
    width: 418px;
    height: 195px;
    position: absolute;
    top: inherit;
    left: 385px;
    z-index: 0;
    bottom: 265px;
   -webkit-transform: scale(8);
    -moz-transform: scale(8);
    -o-transform: scale(8);
    transform: scale(8);
    -webkit-transform: 33% center; /*39*/
    -moz-transform: 33% center;
    -o-transform: 33% center;
    transform-origin: 33% center;

    -webkit-transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    -o-transition: all 2s ease-in-out 0s;
    transition: all 2s ease-in-out 0s;
}
.homepage .experience.overview video.small{
    -webkit-transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    -o-transition: all 2s ease-in-out 0s;
     transition: all 2s ease-in-out 0s;

     -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}


.homepage .video-wrap {
    position: relative;
    margin-top: -50px;
    overflow: hidden;
    width: 100%;
    height: calc(100vh);

}
.homepage video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.homepage .ripple{
    position:absolute;
    top:50%;
    left: 50%;
    display:block;
    border-radius:2px;
    width:2px;
    height:2px;
    margin-top: 0px;
    z-index: 10;
}
.homepage .ripple.animation{
    -webkit-animation:rip 2s infinite ease-out;
  -moz-animation:rip 2s infinite ease-out;
  -o-animation:rip 2s infinite ease-out;
  animation:rip 2s infinite ease-out;
}
.homepage video.small{
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);

    -webkit-transition: all 2s ease-in-out 1.5s;
    -moz-transition: all 2s ease-in-out 1.5s;
    -o-transition: all 2s ease-in-out 1.5s;
    transition: all 2s ease-in-out 1.5s;
}
.homepage .phone-img {
    position: absolute;
    bottom: -20%;
    left: -10%;
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);

    -webkit-transform-origin: 1700px 400px;
    -moz-transform-origin: 1700px 400px;
    -o-transform-origin: 1700px 400px;
    transform-origin: 1700px 400px;
}
.homepage .overview{
    position: relative;
    overflow: hidden;
    padding: 250px 0 260px 0;
    margin-top: 0px;
}
.homepage .overview .text-wrap {
    text-align: center;
    color: #fff;
    width: 90%;
    margin: auto;
}
.homepage .sup {
    font-size: 2.125rem;
    font-family: 'visbycfheavy', sans-serif;
    text-align: left;
    font-weight: 600;
    text-shadow: none;
    margin-bottom: 10px;
    line-height: 100%;
}
.homepage .overview h1{
    font-family: 'visbycfheavy', sans-serif;
    font-size: 4.4175rem;
    line-height: 87%;
    text-shadow: 1px 1px 5px #616060;
}
.homepage .experience{
    background: transparent;
    background-size: cover;
    padding: 250px 0 300px 0;
    color: #3e3e3f;
    position: relative;
    /*-webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;*/
}
.homepage .overview .background-img {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: auto;
}
.homepage .overview #img-game{
    z-index: 2;
}
.homepage .overview #img-auto{
    z-index: 3;
}
.homepage .overview #img-iot{
    z-index: 4;
}
.homepage .experience .text-box {
    margin: 0 20px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.4);
}
.homepage .experience .text-box h2 {
    font-size: 1.25rem;
    margin-top: 10px;
    line-height: 120%;
}
.homepage .experience .text-wrap{
	color: #fff;
}
.homepage .overview video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.homepage .video-wrap h1{
	font-family: 'visbycfheavy', sans-serif;
	font-size: 3rem;
}
#video-copy {
    margin: 0 auto;
}
#video-copy h1 {
    font-size: 70px;
    font-family: 'visbycfheavy';
    line-height: 63px;
    margin-top: 10px;
}
#video-copy .sup {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 700; 
    text-align: center;
    margin-bottom: 0;
}
#video-copy-mobile h1 {
    font-size: 2.5rem;
    font-family: 'visbycfheavy';
    line-height: 48px;
    margin-top: 0px;
}
#video-copy-mobile .sup {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700; 
    text-align: center;
}

/* Media Queries */
@media screen and (max-width: 1500px){

     /* Homepage */
    .homepage .overview{
        padding:200px 0 180px 0;
    }
    .homepage .overview.experience{
        padding: 0;
    }
    .homepage .experience .hand{
        max-width: 744px;
    }
    .homepage .overview.experience .hand{
        max-width: 814px;
    }
    .homepage .overview .background-img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: auto;
    }

}
@media screen and (max-width: 1400px){
    .hand-video-wrapper.shake #hand{
        left: -100px !important;
    }
    .hand-video-wrapper.shake #video {
        left: 283px !important;
    }
}
@media screen and (max-width: 1300px){

    /* Homepage */
    .homepage .overview{
        padding:180px 0 160px 0;
    }
    
    .homepage .digital-text {
/*        top: 6%;*/
        margin-left: -555px;
    }
   
}
@media screen and (max-width: 1200px){
    /* Header */
    .navbar .wave.wave-1, .navbar .wave.wave-2{
        background-size:  cover;
    }

    /* Homepage */
    .homepage .overview.experience.animated {
        height: 600px;
        background-size: cover !important;
        background-position: center right !important;
    }
    .homepage .overview.experience #hand{
        max-width: 850px;
    }
    .homepage .experience.overview #video{
        width: 300px;
        height: 140px;
/*        left: 275px !important;*/
        left: 176px !important;
        bottom: 190px;
        -webkit-transform: 42% center;
        -moz-transform: 42% center;
        -o-transform: 42% center;
        transform-origin: 42% center;
    }
    .homepage .overview.experience #hand{
        -webkit-transform: 47% center;
        -moz-transform: 47% center;
        -o-transform: 47% center;
        transform-origin: 47% center;
    }
/*
    .homepage .banner-text, .homepage .digital-text{
        margin-left: -485px;
    }
*/
    .homepage .digital-text {
        margin-left: -645px;
    }
    .homepage .overview{
        padding:120px 0 100px 0;
    }
    .homepage .overview h1 {
        font-size: 4rem;
    }
    .homepage .innovation{
        background-position: calc(-20vw) center;
    }
    .homepage .touch .circle-extra-outer{
        left: -34px;
    }
    .homepage .experience .hand{
        max-width: 614px;
    }
    .homepage .experience{
        padding: 180px 0 230px 0;
    }
}

@media screen and (max-width: 1100px){
    /* Homepage */
    .homepage .digital-text{
/*        padding-top: 150px;*/
        margin-left: -580px;
    }
    
    .homepage .overview.experience.animated{
        height: 540px;
    }
    .hand-video-wrapper.shake #hand{
        left: -100px !important;
    }
    .hand-video-wrapper.shake #video{
        left: 175px !important;
    }
}


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

    /*Homepage*/
    .homepage .mobile-uvp{
        background: url('../images/home-hero.jpg') no-repeat center center transparent;
        background-size: cover; 
    }
    .homepage .overview.experience{
/*        background: url('../images/background-digital-experience-phone.jpg') no-repeat center center transparent;*/
        height: 600px;
/*
        background-size: cover !important;
        -webkit-transition: background 1s ease-in-out;
        -moz-transition: background 1s ease-in-out;
        -o-transition: background 1s ease-in-out;
        transition: background 1s ease-in-out; 
*/

    }
    .homepage .experience {
        padding: 100px 0 480px 0;
    }
    .homepage .overview video{
        height: 100%;
        width: auto;
    }
    .homepage .overview h1 {
        font-size: 3.5rem;
    }
    .homepage .digital-text{
/*
        position: relative;
        margin: 0;
        width: 100%;
        left: 0;
        height: auto;
        top: 0;
        padding-top: 0px;
*/
        top: 25%;
        margin-left: -420px;
    }
    .homepage .digital-text-wrap {
        background: #f2f2f2;
        padding: 100px 0;
    }
    .homepage .overview.experience.animated {
        background-position: center center !important;
        height: 490px;
    }
    
    .hand-video-wrapper #hand {
        left: -160px !important;
    }
    .homepage .experience.overview #video{
        left: 175px !important;
    }
    .homepage .banner-text {
        padding-top: 170px;
    }
}

@media screen and (max-width: 850px) {
    
    .homepage .overview.experience #hand {
        width: 750px;
    }
    
    .homepage .experience.overview #video {
        width: 270px;
        height: 120px;
        bottom: 170px;
        left: 140px !important;
    }
}

@media screen and (max-width: 767px){
    /*Homepage */
    .homepage .mobile-uvp {
        padding: 120px 0 70px 0;
    }
    .homepage .digital-text{
        position: relative;
        margin: 0;
        width: 100%;
        left: 0;
        height: auto;
        top: 0;
        padding-top: 0px;
    }
    .homepage .digital-text-wrap {
        padding: 50px 0;
    }
    .homepage .overview.experience.animated {
        height: 300px;
        background-position: center center;
    }
    .homepage .overview.experience {
        height: 300px;
        background-position: center center;
    }
    .homepage .sup{
        font-size:  2rem;
    }
    .homepage .overview h1 {
        font-size: 2.5rem;
    }
    .homepage .overview video{
        left:-50%;
    }
    .homepage .experience {
        padding: 100px 0 300px 0;
    }
    .homepage .experience .text-box {
        margin: 0 0px;
    }
}