*{margin: 0; padding: 0}
body{background: #fff; color: #5b6874}
img{max-width: 100%}

.container{max-width: 1920px; margin: 0 auto}
.container:after{display: block; content:''; clear: both}

.logo{position: absolute; top: 50px}
.wrapper{padding: 50px; display: table; height: calc(100% - 100px)}
.content{display: table-cell; vertical-align: middle}

.feature{background: url(images/align-recruiting-solutions-photo-1.jpg) top center / cover no-repeat; height: 100vh; width: 100%}


h1{font: 700 80px/80px "josefin-sans"; text-transform: uppercase; margin: 50px 0 0}



h2{font: 600 30px/44px "josefin-sans"; margin: 0 0 20px; letter-spacing: 0.5px}
h3 {font: 700 60px/64px "josefin-sans"; text-transform: uppercase;
    margin: 0 0 40px}
p{font: 300 22px/38px "josefin-sans"; margin: 0 0 20px; letter-spacing: 0.5px}

cite{font: 600 12px/38px "josefin-sans"; text-transform: uppercase; position: relative; top: -2px}
a{text-decoration: none; color: #f19f1f}

header{color: #fff; position: fixed; height: 100vh; z-index: 1}
header a{font: 600 15px/22px "josefin-sans"; letter-spacing: 2px; text-transform: uppercase; position: absolute; bottom: 50px}

main{float: right; width: 75%; background: #fff}


.testimonials{cursor: grab; width: 40%; position: absolute !important; min-height: 250px}
.testimonials .slick-dots{float: left; list-style: none; margin: 0 0 60px}
.testimonials .slick-dots li{float: left}
.testimonials .slick-dots li button{font-size: 0; height: 13px; width: 13px; background: #fff; border-radius: 13px; border: 2px solid #f19f1f; margin: 0 10px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; outline: 0}
.testimonials ul li.slick-active button{background: #f19f1f}

.angle{clip-path: polygon(0 0, 0 1600px, 500px 1600px, 1200px 0); -webkit-clip-path: polygon(0 0, 0 1600px, 500px 1600px, 1200px 0); height: 1600px; width: 1200px; bottom: 0; background: #2c3e50; position: fixed}

.overlay{background: #2c3e50; height: 100vh; position: absolute; width: 100%; opacity: 0.95; display: none}

.copy{padding: 0 5% 0 40%}
.copy .wrapper{padding: 40px 0 0; height: 100vh}

.copyright{border-top: 1px solid #aaa; text-align: right; margin: 40px 0 0; padding: 30px 0 0; opacity: 0.5}
.copyright a{max-width: 120px; float: left}
.copyright p{font: 300 12px/22px "josefin-sans"; text-transform: uppercase; color: #666; letter-spacing: 1px; float: right}

@media(max-width: 1599px){
    .angle{clip-path: polygon(0 0, 0 1600px, 450px 1600px, 1050px 0); -webkit-clip-path: polygon(0 0, 0 1600px, 450px 1600px, 1050px 0); width: 1050px}
    .copy{padding: 0 5% 0 35%}
}

@media(max-width: 1449px){   
    .angle{clip-path: polygon(0 0, 0 1600px, 350px 1600px, 840px 0); -webkit-clip-path: polygon(0 0, 0 1600px, 350px 1600px, 840px 0);
    width: 840px}
    h1{font: 700 54px/58px "josefin-sans"}
    h2{font: 600 22px/30px "josefin-sans"; letter-spacing: 0}
    h3 {font: 700 34px/44px "josefin-sans"}
    p{font: 300 20px/32px "josefin-sans"}
    span{display: none}
}
    
@media(max-width: 1199px){    
    .copy{padding: 0 5% 0 40%}
}

@media(max-width: 999px){
    header{position: absolute}
    .angle{display: none}
    .overlay{display: block}
    main{width: 100%}
    .testimonials{width: 90%}
    span{display: inline-block}
    .copy{padding: 0 50px}
}

@media(max-width: 499px){
    header, .feature, .overlay{height: 85vh}
    .container{box-shadow: none}
    .logo{top: 20px; max-width: 180px}
    .wrapper{padding: 20px}
    .copy{padding: 20px}
    header a{bottom: 40px}
    h1{font: 700 44px/52px "josefin-sans"; margin: 100px 0 0}
    h2{font: 600 18px/26px "josefin-sans"}
    h3 {font: 700 28px/34px "josefin-sans"}
    .copyright p{float: left}
    .copyright a{clear: both}
}