* { margin: 0 auto; } /* ------NAV------ */ .navbar { overflow: hidden; background-color: #333333; opacity: 0.8; } .navbar a { float: left; font-size: 16px; color: #FFFFFF; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar a:last-child { float: right; margin-left: auto; padding: 0; margin: 0; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #4d6de3; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: #333333; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .navLogo { width: 50px; margin-right: 20px; margin-left: auto; float: right; padding: 0px; } .dropdown-content a:last-child { float: none; color: #333333; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* ------Backgrounds------ */ .main_background { background: url(./main_background.jpg) no-repeat center center; background-size: cover; width: 100%; height: 100vh; } .contact_background { background: url(./contact_background.png) no-repeat center center; background-size: cover; width: 100%; height: 100vh; } .home_background { background: url(./home_background.png) no-repeat center center; background-size: cover; width: 100%; height: 100vh; } /* ------Front Page------ */ .header { display: flex; font-size: 80px; color: #FFFFFF; text-shadow: 3px 3px #333333; text-align: center; justify-content: center; margin-top: 10vh; } .content { font-size: 80px; line-height: 80px; color: #FFFFFF; text-shadow: 3px 3px #333333; height: 80px; position: absolute; margin-left: -50px; } .content:before { position: absolute; line-height: 90px; } .content:after { position: absolute; line-height: 90px; } .content:after, .content:before { color: #FFFFFF; animation: 2s linear 0s normal none infinite opacity; -webkit-animation: 2s ease-out 0s normal none infinite opacity; -moz-animation: 2s ease-out 0s normal none infinite opacity; -o-animation: 2s ease-out 0s normal none infinite opacity; } .visible { float: left; font-weight: 600; overflow: hidden; height: 90px; } ul { margin-top: 0; text-align: center; list-style: none; animation: 6s linear 0s normal none infinite change; -webkit-animation: 6s linear 0s normal none infinite change; -moz-animation: 6s linear 0s normal none infinite change; -o-animation: 6s linear 0s normal none infinite change; } ul li { line-height: 90px; margin: 0; } @-webkit-keyframes opacity { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes opacity { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes change { 0% { margin-top: 0; } 15% { margin-top: 0; } 25% { margin-top: -91px; } 40% { margin-top: -91px; } 50% { margin-top: -182px; } 65% { margin-top: -182px; } 75% { margin-top: -91px; } 85% { margin-top: -91px; } 100% { margin-top: 0; } } .myButton { box-shadow:inset 0px 1px 0px 0px #ffffff; background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); background-color: #dcdcdc; border:1px solid #dcdcdc; display:inline-block; cursor:pointer; color:#333333; font-size:28px; padding:10px 50px; text-decoration:none; text-shadow:0px 1px 0px #ffffff; } .myButton:hover { background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%); background-color:#e9e9e9; opacity: 0.7; } .myButton:active { position:relative; top:1px; } .learn_more { display: flex; justify-content: center; align-content: center; margin-top: 40vh; } .scroll { display: flex; justify-content: center; align-content: center; margin-top: 10vh; } /* ------Home------ */ .homeHeaders { display: inline-block; text-align: left; align-content: center; margin: 5vw; } .homeHeaders h1 { font-size: 80px; color: #FFFFFF; text-shadow: 3px 3px #333333; width: 60%; float: left; } .homeHeaders p { width: 50%; font-size: 40px; color: #ffffff; text-shadow: 3px 1px #333333; float: left; margin-top: 5vh; margin-left: 3vw; } .home-buttons { display: inline-flex; gap: 50px; margin: 5vh 10vw; } .consultation { background: #FF8B18; border-color: #FF8B18; box-shadow:inset 0px 0px 0px 0px; color: #FFFFFF; text-shadow: none; } .consultation:hover { background: #FF8B18; border-color: #FF8B18; opacity: 0.7; } .consultation, .firm, .attorneys { width: 200px; text-align: center; } .chat-box * { box-sizing: border-box; } .openChatBtn { box-shadow: inset 0 0 0 2px #FFFFFF; background-color: #4d6de3; border-radius: 12px; color: #ffffff; padding: 16px 20px; border: none; font-weight: 500; font-size: 25px; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 200px; justify-content: center; text-align: center; } .openChat { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #333333; z-index: 9; } form { max-width: 300px; padding: 10px; background-color: #FFFFFF; } form textarea { width: 100%; font-size: 18px; padding: 15px; margin: 5px 0 22px 0; border: none; font-weight: 500; background: #d5e7ff; color: #000000; resize: none; min-height: 200px; } form textarea:focus { background-color: rgb(219, 255, 252); outline: none; } form .btn { background-color: #4d6de3; color: white; padding: 16px 20px; font-weight: bold; border: none; cursor: pointer; width: 100%; margin-bottom: 10px; opacity: 0.8; } form .close { background-color: #FE181E; } form .btn:hover, .openChatBtn:hover { opacity: 1; } form h1, label { color: #333333; } /* ------Contact------ */