/* Styling for all pages */ /* root to make scope of variable wide */ :root{ --site-color-01: #004694; --site-color-01-hover:#013876; } html{ font-size: 62.5%; } body{ background-color: #1e1e1e; } body::after{ position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(../data/images/facebook-color.png) url(../data/images/instagram-color.png); } .wrapper-main { width: 1100px; margin: 0 auto; } h1{ font-size: 2.6rem; line-height: 1.5; color: #fff; font-family: "Roboto", sans-serif; font-weight: 600; text-transform: uppercase; } h2{ font-size: 2.8rem; line-height: 1.5; color: #fff; font-family: "Roboto", sans-serif; font-weight: 600; text-transform: uppercase; } h3{ font-size: 2.6rem; line-height: 1.5; color: #fff; font-family: "Roboto", sans-serif; font-weight: 600; text-transform: uppercase; } h4{ color: #fff; font-weight: 400; font-family: "Roboto", sans-serif; } p{ font-size: 1.4rem; line-height: 1.75; color: #fff; font-family: "Roboto", sans-serif; } a{ font-size: 1.4rem; line-height: 1.75; color: #fff; font-family: "Roboto", sans-serif; cursor: pointer; } .header-main{ position: fixed; top: 0; width: 100%; height: 60px; background-color: #FFF; display: flex; justify-content: space-between; z-index: 1000; } .header-main-logo{ width: fit-content; height: 100%; padding-left: 60px; display: flex; } .header-main-logo img{ height: 50px; align-self: center; } .header-main-nav{ width: fit-content; height: 100%; } .header-main-nav ul{ list-style: none; margin-left: 30px; } .header-main-nav ul li{ display: inline; float: left; } .header-main-nav ul li a{ padding: 0px 10px 0px 10px; font-family: "Roboto", sans-serif; line-height: 60px; color: var(--site-color-01); display: block; height: 100%; } .header-main-nav ul li a:hover{ color: var(--site-color-01-hover); font-family: Arial, Helvetica, sans-serif; line-height: 60px; } .header-main-sm{ width: fit-content; height: 100%; padding-right: 60px; display: flex; align-items: center; column-gap: 10px; } .header-main-sm-fb{ width: 20px; height: 20px; background-image: url(../data/icons/facebook-bw.png); background-repeat: no-repeat; background-size: cover; } .header-main-sm-fb:hover{ background-image: url(../data/icons/facebook-color.png); } .header-main-sm-li{ width: 20px; height: 20px; background-image: url(../data/icons/linkedin-bw.png); background-repeat: no-repeat; background-size: cover; } .header-main-sm-li:hover{ background-image: url(../data/icons/linkedin-color.png); } /* FOOTER SECTION */ .footer-main{ width: 100%; padding: 60px 0 100px 0; background-color: #141414; } .footer-main-flex { display: flex; justify-content: center; flex-wrap: wrap; } .footer-testemoni { flex-basis: 20%; display: flex; justify-content: center; flex-wrap: wrap; } .footer-testemoni img { width: 50%; border-radius: 100px; } .footer-testemoni h4 { font-size: 1.6rem; text-align: center; padding: 20px 20px 0 20px; } .footer-testemoni p { text-align: center; font-size: 1.6rem; padding: 20px 20px 0 20px; } .footer-getintouch { padding: 10px 20px; margin: 40px 0 60px 0; border: 2px solid #FFF; font-weight: 600; } .footer-getintouch:hover { border: 2px solid var(--site-color-01-hover); transition: all ease-in-out 200ms; } .footer-sitemap { flex-basis: 100%; display: flex; } .footer-sitemap a { line-height: 30px; } .footer-sitemap a:hover { color: var(--site-color-01-hover); } .footer-sitemap ul:nth-child(1) { flex-basis: 180px; border-left: 4px solid var(--site-color-01); padding-left: 20px; } .footer-sitemap ul:nth-child(2) { flex-basis: 300px; } .footer-sitemap ul:nth-child(3) { flex-basis: 350px; } .footer-sitemap p { text-transform: uppercase; } .footer-sitemap ul:nth-child(4) { flex-grow: 1; } .footer-sitemap ul:nth-child(4) li { clear: both; float: right; } .burger-menu, .burger-menu-btn { display: none; } /* MOBILE VERSION */ @media only screen and (max-width: 600px) { .burger-menu-btn { display: block; margin-left: 10px; width: 50px; height: 50px; background-image: url(../data/icons/menu-burger.png), url(../data/icons/cross.png); background-size: cover; background-repeat: no-repeat; background-position: center, center left 50px; } .burger-menu { display: none; position: fixed; width: 100%; height: 100vh; z-index: 900; background-color: #111; } .burger-menu ul { width: 100%; height: calc(100vh - 60px); display: flex; flex-wrap: wrap; align-content: flex-start; } .burger-menu ul li { flex-basis: 100%; border-top: 2px solid #000; } .burger-menu ul li:last-child{ border-bottom: 2px solid #000; } .burger-menu ul li a { display: block; height: 100%; font-size: 3rem; padding: 30px 0; flex-basis: 100%; text-align: center; } .wrapper-main { width: calc(100% - 40px); } .header-main{ position: fixed; top: 0; width: 100%; height: 60px; background-color: #FFF; display: flex; justify-content: space-between; z-index: 1000; } .header-main-logo{ padding-left: 20px; } .header-main-nav{ display: none; } .header-main-sm{ padding-right: 20px; } /* mobile version footer section */ .footer-testemoni { display: none; } .footer-getintouch { margin: 0 0 60px ; } .footer-sitemap { flex-wrap: wrap; flex-basis: 100%; display: flex; } .footer-sitemap ul:nth-child(1) { border-left: none; padding-left: 0; } .footer-sitemap ul:nth-child(1), .footer-sitemap ul:nth-child(2), .footer-sitemap ul:nth-child(3) { flex-basis: 100%; text-align: center; padding-bottom: 20px; } .footer-sitemap p { padding: 0 20px; } .footer-sitemap ul:nth-child(4) p { text-align: center; } }