*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#111;
font-family:Arial,sans-serif;
overflow:hidden;
}

header{
position:absolute;
top:0;
left:0;
width:100%;
padding:40px 60px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:100;
}

.logo{
height:60px;
}

.menu{
color:white;
font-size:32px;
cursor:pointer;
}

.hero{
height:100vh;
display:flex;
overflow:hidden;
}

.hero-main{
width:85%;
position:relative;
background:url('assets/hero-01.png');
background-size:cover;
background-position:center;
}

.hero-preview{
width:15%;
position:relative;
background:url('assets/hero-02.png');
background-size:cover;
background-position:center;

clip-path:polygon(20% 0%,100% 0%,100% 100%,0% 100%);
cursor:pointer;

transition:.4s;
}

.hero-preview:hover{
width:18%;
}

.arrow{
position:absolute;
left:35%;
top:50%;
transform:translateY(-50%);
color:white;
font-size:60px;
}

.content{
position:absolute;
left:70px;
top:180px;
max-width:700px;
}

.content h1{
font-size:78px;
line-height:0.95;
font-weight:300;
color:white;
}

.content span{
font-style:italic;
}

.content p{
margin-top:30px;
font-size:24px;
color:white;
}

.info-card{
position:absolute;
left:70px;
bottom:70px;

width:320px;

background:#EFE5D2;

padding:30px;
}

.item{
font-size:18px;
line-height:1.5;
}

.item small{
display:block;
margin-top:8px;
opacity:.7;
}

.info-card hr{
margin:25px 0;
}