#hero{

    height:100vh;

    overflow:hidden;

    position:relative;

}

.hero-home{

    position:relative;

    height:100vh;

    overflow:hidden;

}

.hero-background{

    background-size:cover;
    background-position:center;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.35);

}

.hero-inner{

    position:relative;

    z-index:10;

    width:100%;

    height:100%;

}
.hero-left{

    position:absolute;

    left:11.5%;

    top:49%;

    transform:translateY(-50%);

    width:520px;

    z-index:20;

    font-family:'Lato',sans-serif;

}

.hero-left h1{

    font-size:76px;

    font-weight:300;

    color:#222;

    margin:0 0 30px;

    letter-spacing:-2px;

}

.hero-left p{

    font-size:17px;

    line-height:1.42;

    font-weight:400;

    color:#333;

    margin:0;

}

.hero-button{

    display:inline-block;

    margin-top:45px;

    font-size:18px;

    font-weight:400;

    color:#777;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:3px;

}

.devices{

    position:absolute;

    right:-5px;

    top:65px;

    width:860px;

    height:560px;

}
.macbook{

    position:absolute;

    right:0;

    bottom:0px;

    width:760px;

    z-index:1;

}
.ipad{

    position:absolute;

    left:215px;

    top:55px;

    width:270px;

    z-index:2;

}
.iphone{

    position:absolute;

    left:115px;

    top:175px;

    width:145px;

    z-index:3;

}