* { outline: none; padding: 0; margin: 0; } html, body { background: #ffffff; display: block; width: 100%; height: 100%; } header { background: #d1e8ff; position: relative; width: 100%; height: 950px; color: #ffffff; overflow: hidden; } header section { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; max-width: 1300px; width: 100%; height: 100%; padding: 20px; margin: 0 auto; } header section div.logo img { width: 350px; margin: 50px 0; } header section div.logo a { display: block; } header section > img { position: absolute; width: 1300px; height: 1300px; right: -20%; top: -10%; z-index: 1; } header section > div { z-index: 2; } header section h1 { font: bold 40px 'Rajdhani', sans-serif; color: #434242; margin-bottom: 100px; } header section h2 { font: normal 32px 'Rajdhani', sans-serif; color: #434242; margin-top: 100px; } header section h3 { display: block; font: bold 16px 'Rajdhani', sans-serif; color: #434242; margin-top: 10px; } header section h3 img { width: 16px; } header section div.buttons > a { background: #69788e; display: table; font: bold 32px 'Rajdhani', sans-serif; text-transform: uppercase; text-decoration: none; border: 5px solid #57667b; color: #FFFFFF; padding: 25px 150px; margin-bottom: 20px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); border-radius: 20px; transition: all 250ms ease-in-out; } header section div.buttons > a:hover { background: #57667b; -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } header section div.buttons > a.small { background: #83aed9; display: inline-block; font: bold 22px 'Rajdhani', sans-serif; border: 1px solid #6890ba; color: #FFFFFF; padding: 10px; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } header section div.buttons > a.small:hover { background: #86b5e1; border: 1px solid #658fb8; color: #FFFFFF; -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2); -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } @media screen and (max-width: 1100px) { header section { align-items: center; justify-content: center; text-align: center; } header section div.buttons > a { margin: 0 auto 20px auto; } header section h1 { margin-bottom: 20px; } header section div.logo img { margin-bottom: 0; } header section > img { display: none; } } @media screen and (max-width: 500px) { /*header {*/ /*min-height: 100%;*/ /*height: auto;*/ /*}*/ header section { width: auto; } header section div.logo img { width: 100%; } header section div.buttons > a { display: block; padding: 25px 5px; } }