header { width: 100%; } .direction{ direction: ltr !important; } .content { width: 94%; margin: 4em auto; font-size: 20px; line-height: 30px; text-align: justify; } .logo { line-height: 60px; position: fixed; margin-left: 50px; display: flex; height: 150px; align-items: center; } .logo img { width: 300px; } nav { position: fixed; width: 100%; line-height: 60px; border-bottom: 1px solid #fff; z-index: 100; } nav ul { line-height: 60px; list-style: none; background: rgba(0, 0, 0, 0); overflow: hidden; color: #fff; padding: 0; text-align: left; margin: 0; padding-left: 450px; transition: max-height 0.5s ease-out; } nav.black ul { background: #000; } nav ul li { display: inline-block; } nav ul li a:hover { background-color: #fff; color: #000; } nav ul li a { text-decoration: none; color: #fff; font-size: 20px; display: flex; width: auto; height: 150px; padding: 16px 40px; align-items: center; } nav ul li a:hover { color: #000; } .menu-icon { line-height: 60px; width: 100%; background: #000; text-align: right; box-sizing: border-box; padding: 15px 24px; cursor: pointer; color: #fff; display: none; } .clients h3{ font-size:50px; text-transform: uppercase; padding-bottom:15px; margin-top: 20px; } .customer-logos{ background-color:#272d35; padding:30px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } body { margin: 0; } .full-screen-image { background-size: cover; background-position: center; position: relative; width: 100vw; height: 100vh; } .carousel-item { transition: opacity 2s ease-out; animation: fadeIn 2s ease-out forwards ; } .masked-image { -webkit-mask-image: url(../img/mask.png); mask-image: url(../img/mask.png); position: absolute; width: 100%; height: 100%; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .masked-image img { animation: slideUp 2s ease-out forwards; width: 100%; height: 100%; object-fit: cover; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(24, 23, 23, 0.5); opacity: 0; animation: fadeIn 2s ease-out forwards; } .text-container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); color: white; text-align: left; } .title { font-size: 2.5em; margin: 0; border-left: solid 10px white; padding-left: 15px; margin-bottom: 50px; } .description { font-size: 1.0em; margin-top: 0.5em; border-left: solid 10px white; padding-left: 15px; width:60%; } @media(max-width: 786px) { .logo { position: fixed; top: 0; margin-top: 15px; height: auto; } .logo img { width: 200px; } nav { line-height: auto; } nav ul li a:hover { background-color: transparent; color: lightgrey; } nav ul { max-height: 0; background: #000; display: flex; flex-direction: column; align-items: center; padding-left: 0px; } nav.black ul { background: #000; } nav ul li a { text-decoration: none; color: #fff; font-size: 20px; display: flex; width: auto; height: auto; padding: 0px 0px; align-items: center; } .menu { display: in; } .menu-icon { display: block; } nav ul.showing { min-height: 100vh; } nav ul li { display: block; padding: 10px 0; text-align: center; height: 50px; } .masked-image { -webkit-mask-image: url(../img/maskmob.png); mask-image: url(../img/maskmob.png); position: absolute; width: 100%; height: 100%; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .title { font-size: 1.3em; margin: 0; border-left: solid 2px white; padding-left: 15px; margin-bottom: 50px; } .description { font-size: 1.0em; margin-top: 0.5em; border-left: solid 2px white; padding-left: 15px; width:80%; } .clients h3{ font-size:25px; margin-top: 25px; text-transform: uppercase; padding-bottom:0px; } .customer-logos{ background-color:#272d3513; padding:30px; } } .main_section{ min-height:70vh; margin-top:200px; }