/* Inspiration for this menu: https://dribbble.com/shots/2962837-Header-Nav by Scout: https://dribbble.com/scout */ @import 'https://fonts.googleapis.com/css?family=Roboto:400,500'; html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { height: 100%; color: #ffffff; scroll-behavior: smooth; } html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure { margin: 0; padding: 0; } .w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap} h4 { color: #000000; } .button4 { display: inline-block; border: 2px solid; border-color: #ffffff; background-color: transparent; color: #ffffff; padding: 14px 28px; font-size: 18px; cursor: pointer; text-align: center; margin-bottom: 0px; letter-spacing: .5px; font-family: 'Poppins', sans-serif; text-decoration: none; width: auto; } .button4:hover { background-color: #ffffff; color: #000000; text-decoration: none; } .blockquote-wrapper { display: flex; } /* Blockquote main style */ .blockquote { position: relative; font-family: 'Montserrat', sans-serif; font-weight: 800; color: #ffffff; padding: 30px 0; width: 95%; max-width: 500px; z-index: 1; margin: 40px auto; align-self: center; border-top: solid 1px; border-bottom: solid 1px; } /* Blockquote header */ .blockquote h1 { position: relative; color: #ffffff; font-size: 20px; font-weight: 800; line-height: 1; margin: 0; } /* Blockquote right double quotes */ .blockquote:after { position: absolute; content: "”"; color: rgba(0, 0, 0, 1); font-size: 10rem; line-height: 0; bottom: -43px; right: 30px; } /* increase header size after 600px */ @media all and (min-width: 600px) { .blockquote h1 { font-size: 20px; } } /* Blockquote subheader */ .blockquote h4 { position: relative; color: #ffffff; font-size: 1.4rem; font-weight: normal; line-height: 1; margin: 0; padding-top: 20px; text-align: right; z-index: 1; font-family: 'Poppins', sans-serif; } * { box-sizing: border-box; } /* Create two equal columns that floats next to each other */ .column { float: left; width: 50%; padding: 0px; border-spacing: 0px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 500px) { .column { width: 100%; } .container { width: 100%; } /* Blockquote main style */ .blockquote { position: relative; color: #ffffff; padding: 15px 0; width: 100%; max-width: 500px; z-index: 1; margin: 30px auto; align-self: center; border-top: solid 1px; border-bottom: solid 1px; } /* Blockquote header */ .blockquote h1 { position: relative; color: #ffffff; font-size: 15px; font-weight: 800; line-height: 1; margin: 0; } .blockquote h4 { position: relative; color: #ffffff; font-size: 1.4rem; font-weight: normal; line-height: 1; margin: 0; padding-top: 10px; text-align: right; z-index: 1; } } header, footer, nav, section, article, hgroup, figure { display: block; } .myDiv { width: 85%; text-align: justify; text-justify: inter-word; opacity: 0.7; } .logoimg { border: 0px; width: 65%; padding: 60px; } .menu { position: fixed; display: block; top: 0px; right: 5vw; z-index: 250; } .menu_i { display: block; overflow: hidden; width: 35px; line-height: 25px; padding: 10px 0; margin: 7px 0 0; } .bgimg-1, .bgimg-2, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9, .bgimg-10, .bgimg-11, .bgimg-12, .bgimg-13 { position: relative; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .bgimg-13 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)), url('bg13.jpg'); width: 100%; height: 100%; background-position: center; background-size: cover; padding: 90px; padding-top: 200px; margin:auto auto; } .bgimg-9 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)), url('a-l-ya631mqQ7Ng-unsplash.jpg'); width: 100%; height: 100%; background-position: center; background-size: cover; padding: 90px; padding-top: 150px; margin:auto auto; } .bgimg-12 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)), url('bg12.jpg'); width: 100%; height: 100%; background-position: center; background-size: cover; padding: 90px; padding-top: 200px; margin:auto auto; } .bgimg-11 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),url('bg11.jpg'); width: 100%; height: 100%; background-position: center; background-size: cover; padding: 90px; padding-top: 200px; margin:auto auto; } .bgimg-10 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),url('bg15.jpg'); width: 100%; height: 100%; background-position: center; background-size: cover; padding: 90px; padding-top: 200px; margin:auto auto; } .three h7 { font-size: 28px; font-weight: 500; letter-spacing: 0; line-height: 1.5em; width: 100%; padding-bottom: 15px; position: relative; } .three h7:before { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 55px; background-color: #111; } .three h7:after { content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 95%; max-width: 100%; background-color: #fff; } /* Turn off parallax scrolling for tablets and phones */ @media only screen and (max-device-width: 1024px) { .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9, .bgimg-10, .bgimg-11, .bgimg-12, .bgimg-13 { background-attachment: scroll; padding: 20px; } } a:hover { opacity: 0.7; text-decoration: underline; } .menu_i_tx { display: inline-block; vertical-align: top; transform: translate(0,100%) rotate(-90deg); transform-origin: 0 0; white-space: nowrap; } .menu_i_tx:after { content: ""; float: left; margin-top: 100%; } body { font-family: 'Roboto', sans-serif; font-size: 100%; line-height: 1.5; width: 100%; } .container { width: 90%; margin-left: auto; margin-right: auto; max-width: 1200px; } .container:after { content: ""; display: table; clear: both; } /* Full screen background image */ .hero { background: url('background.jpg'); background-size: cover; width: 100%; height: 100%; position: relative; padding: 0px, 16px; } /* Blueish tint overlay */ .hero:after { content: ''; background-image: url('background.jpg'); background-position: center; background-size: cover; position: absolute; top: 0; width: 100%; height: 100%; } .logo-button { width: 65%; height: 50vh; position: absolute; left: 20%; top: 30%; margin: -75px 0 0 -75px; background-image: url("aaa-ent-logo-landscape-WHT.png");background-repeat: no-repeat; background-position: center; background-size: 100%; overflow: hidden; text-decoration: none; z-index: 100; } /* Making sure everything in .hero sits above our :after elements */ .hero * { position: relative; z-index: 200; } #masthead { padding: 2.5em 0; position: relative; } #masthead.is-active { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); } /* Using this method because browsers can transition opacity very cheaply as opposed to using background: rgba https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ */ #masthead:after { content: ''; position: absolute; top: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; transition: opacity 0.3s ease; } #masthead.is-active:after { opacity: 1; } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { background-color: transparent; border: 0; color: inherit; cursor: pointer; display: inline-block; float: left; font: inherit; margin: 0.8125em 0 0; overflow: visible; outline: none; padding: 0; text-transform: none; transition: opacity 0.15s; -webkit-appearance: none; } .hamburger:hover { opacity: 0.7; } .hamburger-box { width: 30px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 2px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; } #masthead.is-active .hamburger-inner, #masthead.is-active .hamburger-inner::before, #masthead.is-active .hamburger-inner::after { background-color: #000; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -6px; } .hamburger-inner::after { bottom: -6px; } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { transition-property: none; } .hamburger--boring.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .hamburger-label { color: #fff; display: inline-block; font-weight: 700; letter-spacing: 0.08em; line-height: 1; margin-left: 0.3125em; text-transform: uppercase; } #masthead.is-active .hamburger-label { color: #000; } .hamburger-box, .hamburger-label { display: inline-block; vertical-align: middle; } #site-nav { clear: both; display: flex; flex-direction: column; height: 0; overflow: hidden; padding-top: 2.5em; } #site-nav.is-active { height: auto; overflow: visible; } #site-nav .col { padding-bottom: 2.5em; } @media screen and (min-width: 550px) { #site-nav { flex-direction: row; flex-wrap: wrap; } #site-nav .col { flex: 0 0 50%; } } @media screen and (min-width: 768px) { #site-nav .col { flex: 0 0 33.333333333%; } } @media screen and (min-width: 960px) { #site-nav { flex-wrap: nowrap; } #site-nav .col { flex: 0 0 20%; } #site-nav .col:last-child { display: flex; justify-content: flex-end; } } #site-nav h4 { letter-spacing: 0.05em; text-transform: uppercase; } #site-nav ul { list-style-type: none; margin-top: 1em; } #site-nav li { margin-bottom: 0.3125em; } #site-nav li a { color: #b4b9ba; text-decoration: none; transition: color 0.3s ease; } #site-nav li a:hover, #site-nav li a:focus { color: #686d6e; } #site-nav .social { margin: 0; overflow: hidden; } #site-nav .social li { float: left; margin: 0 0.3125em; width: 32px; height: 32px; } #site-nav .social li svg { display: block; fill: #b4b9ba; width: 100%; height: 100%; transition: fill 0.3s ease; } #site-nav .social li:hover svg { fill: #686d6e; } #masthead-search { float: right; margin-top: 0.625em; width: 100%; max-width: 14em; position: relative; -webkit-appearance: none; } #masthead-search input { background: transparent; border: none; border-color: #fff; border-style: solid; border-width: 1px; border-radius: 50px; outline: none; width: 100%; padding: 0.75em 1.125em; transition: border-color 0.3s ease; -webkit-appearance: none; } #masthead-search button { background: none; border: none; color: #fff; font-size: 1em; padding: 0; position: absolute; top: 50%; right: 0.75em; transform: translateY(-50%); -webkit-appearance: none; } #masthead.is-active #masthead-search button { color: #b4b9ba; } #masthead.is-active #masthead-search input { border-color: #b4b9ba; } #masthead-search ::-webkit-input-placeholder { color: #fff; } #masthead-search :-moz-placeholder { color: #fff; opacity: 1; } #masthead-search ::-moz-placeholder { color: #fff; opacity: 1; } #masthead-search :-ms-input-placeholder { color: #fff; } #masthead.is-active #masthead-search ::-webkit-input-placeholder { color: #b4b9ba; } #masthead.is-active #masthead-search :-moz-placeholder { color: #b4b9ba; opacity: 1; } #masthead.is-active #masthead-search ::-moz-placeholder { color: #b4b9ba; opacity: 1; } #masthead.is-active #masthead-search :-ms-input-placeholder { color: #b4b9ba } #masthead .col { opacity: 0; } #masthead.is-active .col { transform: translateY(40px); transition: opacity 0.3s ease; animation: fade-in-stagger 0.8s ease forwards; } #masthead.is-active .col:nth-child(1) { -webkit-animation-delay: 0; } #masthead.is-active .col:nth-child(2) { -webkit-animation-delay: 0.1s; } #masthead.is-active .col:nth-child(3) { -webkit-animation-delay: 0.2s; } #masthead.is-active .col:nth-child(4) { -webkit-animation-delay: 0.3s; } #masthead.is-active .col:nth-child(5) { -webkit-animation-delay: 0.4s; } @keyframes fade-in-stagger { to { opacity: 1; transform: translateY(0); } }