@import url('https://fonts.googleapis.com/css?family=Hammersmith+One|Playfair+Display:900|Roboto:100,300,400,900'); html{ font-size: 10px; } .clearfix::after { content:""; display: block; clear: both; } body * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "roboto", sans-serif; font-size: 1.4rem; } h1,h2,h3,h4 { margin: 0; padding: 0; } p { font-weight: 100; letter-spacing: 0.05em; } header { background: url("../img/header-background.png") center top / cover; height: 670px; } header .container { width: 940px; margin: 0 auto; } header .top-line .logo { font-size: 3rem; color: #42a0c4; font-weight: 100; float: left; } header .top-line .logo img { position: relative; top: 15px; } header .top-line .nav { float: right; margin-top: 35px; } header .top-line .nav ul { margin: 0; padding: 0; list-style: none; } header .top-line .nav li { padding: 0; display: inline-block; margin-left: 25px; } header .top-line .nav a{ font-size: 1.3rem; font-weight: 900; color: #fff; text-decoration: none; transition: color 0.5s ease; } header .top-line .nav a:hover { color: #00e0d0; } header .slider { position: relative; width: 100%; height: 500px; } header .slider .slide { text-align: center; position: absolute; opacity: 0; left: 100px; width: 80%; transition: opacity 0.3s ease; } header .slider .slide h1 { color: #fff; font-weight: 900; font-size: 3.2rem; margin-top: 160px; margin-bottom: 45px; font-family: 'Playfair Display', sans-serif; } header .slider .slide h1::after { content: ""; height: 1px; width: 50px; background-color: #00e0d0; display: block; position: relative; left: 350px; top: 20px; } header .slider .slide p { color: #fff; line-height: 24px; } header .slider .slide:first-child { opacity: 1; z-index: 1; } header .slider .slide input[type="button"] { background: none; border: 1px solid #00e0d0; padding: 10px 15px; color: #00e0d0; font-family: 'Hammersmith One', sans-serif; font-size: 1.6rem; margin-top: 40px; } header .slider .arrows img{ position: absolute; z-index: 1; } header .slider .arrows img:first-child { top: 50%; } header .slider .arrows img:last-child { top: 50%; right: 0; }