@charset "utf-8"; /* CSS Document */ html, body { font-family: 'Roboto', sans-serif; font-weight: 300; margin: 0; padding: 0; height: 100%; font-size: 20px; line-height: 1.6; color: white; width: 100%; background-color: #151515; } a { text-decoration: none; color: paleturquoise; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: rgb(230, 230, 230); } h2 { margin: 38px 0 0; font-size: 40px; } h3 { margin: 0; font-size: 33px; } h4 { margin: 0; padding: 20px 0 0; font-size: 20px; } .nav { width: 100%; padding: 0; } .navbar { position: absolute; /* only used if JS is disabled */ top: 0; width: 100%; z-index: 100; display: flex; align-items: center; justify-content: flex-start; text-align: center; text-transform: uppercase; text-decoration: none; overflow: hidden; padding: 0; transition: 1s; } /* This class is applied by a JS script, so that users with JS disabled can still see the navbar, but it won't move while they're scrolling. This is needed because the navbar is transparent, and a black background is applied by the script on scroll. */ .navbar-allowmoving { position: fixed; } .navbar-colored { background: rgba(0, 0, 0, 1); } .navbar-colored img { transform:translate(50px, 0); } .navbar-transparent { background: rgba(0, 0, 0, 0.0); } .navbar-transparent img { opacity: 0; } .navbar img { margin-left: -30px; width: 30px; height: 30px; transition: 1s; } .navbar li { display: inline-block; text-align: center; font-size: 25px; font-family: 'Oswald', sans-serif; font-weight: 300; margin: 0; padding: 0 10px; } .navbar a { color: white; margin: 0; padding: 0; text-decoration: none; display: flex; align-items: center; } .navbar li.nav-services { background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5); background-size: 800px, 800px; color: aquamarine; text-fill-color: transparent; animation: gradient 2s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .mind-content_main { width: 1260px; margin: auto; } /* Begin Main Content */ main { display: block; box-sizing: border-box; width: 100%; max-width: 100%; } /* End Main Content */ /* Begin footer */ footer.mind-site-footer_main { display: grid; grid-template-columns: 1fr 1fr; position: relative; z-index: 3; } .mind-site-footer_main p { font-family: 'Montserrat', sans-serif; font-weight: 800; color: white; margin: 0; padding: 20px; font-size: 25px; } /* .mind-page-title is only used by pages (homepage has a different title style), however other pages have the footer too. */ .mind-page-title, footer.mind-site-footer_main { background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667); background-size: 1000%, 100%; animation: gradient 7s linear infinite; animation-direction: alternate-reverse; color: white; } nav.mind-site-footer_nav { text-align: right; margin: 20px; } /* End footer */ /* Begin policy popup */ /* todo: this makes the page a little bit higher & larger, adding bars. fix it */ .mind-policy-popup { display: none; /*Hidden, we want to show it via JavaScript */ /* Theming */ background: rgb(30, 30, 30); color: white; border-radius: 3px; padding: 10px; font-size: 25px; box-sizing: border-box; box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2); /* Disable text highlighting */ user-select: none; -moz-user-select: none; -webkis-user-select: none; -ms-user-select: none; -o-user-select: none; /* Size */ width: 600px; overflow: hidden; /* Positioning */ position: fixed; left: 50px; bottom: 75px; z-index: 2; } .mind-policy-popup p { font-family: 'Montserrat', sans-serif; font-weight: 200; color: white; font-size: 16px; padding: 0 20px; } .mind-policy-popup button { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; transition-duration: 0.4s; border-radius: 3px; background-color: #484848; border: none; cursor: pointer; color: white; padding: 15px 30px; text-align: center; margin: 20px; float: right; } .mind-policy-popup button:hover { background-color: #44277a; } /* End policy popup */ .arrow-down { border: solid white; opacity: 0.4; border-width: 0 2px 2px 0; display: inline-block; padding: 6px; margin-left: -6px; position: absolute; transform: rotate(45deg); animation: bounce 1.5s infinite; transition: 1s; } /* Begin Ghost mandatory CSS */ .kg-width-wide { } .kg-width-full { } .kg-gallery-container { } .kg-gallery-image { } .kg-gallery-row { } .kg-bookmark-card { } .kg-bookmark-container { } .kg-bookmark-content { } .kg-bookmark-title { } .kg-bookmark-description { } .kg-bookmark-metadata { } .kg-bookmark-icon { } .kg-bookmark-author { } .kg-bookmark-publisher { } .kg-bookmark-thumbnail { } .kg-image { max-width: 100%; } /* End Ghost mandatory CSS */ /* Generic class to make things unselectable */ .unselectable { -moz-user-select: none; -webkis-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; } img { -moz-user-select: none; -webkis-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; } /* ANIMATED GRADIENT BACKGROUND */ @keyframes gradient { 0% {background-position: 0%} 100% {background-position: 100%} } /* COLORED TEXT SELECTION */ ::selection { color: #2d0670; /* We need RGBA because Chrome forces it to be semi-trasparent, making white look like grey. By setting it to 99.5% opacity, we can override this. 100% does not work, however. */ background: rgba(255, 255, 255, 0.995); } /* Begin fonts */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 100; src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* End fonts */