/* Hide Mobile Divs */ #nav_mobile_div { visibility: hidden; display: none; } #mobilenavbar { visibility: hidden; display: none; } #mobilenavbar_spacer { visibility: hidden; display: none; } #mobilenavbtn { visibility: hidden; display: none; } #closebtn { visibility: hidden; display: none; } .flexparent_row { width: 95vw; } #content { margin: auto; width: 90vw; background-color: #222222; } /* Desktop split page */ .halfpage { width: 46%; margin:0 2%; } /* Nav Desktop */ #nav_desktop { height: 85px; background-color: #111111; position: fixed; width: 100%; z-index: 1; } #nav_desktop_spacer { height: 85px; position: relative; width: 100%; z-index: 0; } #navlogo { top: 15px; height: 55px; position: fixed; right: 20px; z-index: 1; } /* Bottom Navbar */ #nav_bottom_div { width: 100%; height: 80px; align-items: center; display: flex; justify-content: center; position: fixed; bottom: 0; } ul.nav_bottom { list-style-type: none; margin: 0; padding: 0; position: relative; overflow: hidden; z-index: 1; display: flex; flex-flow: row nowrap; align-items: center; } li.nav { float: left; display: inline; position: relative; } li a.nav { display: inline-block; color: white; text-align: center; padding: 30px 16px 15px; text-decoration: none; position: relative; font-family: 'Montserrat', 'sans-serif'; } li a:after { content: ""; position: relative; width: 100%; height: 3px; background: #0074D9; visibility: hidden; border-radius: 5px; transform: scaleX(0); transition: .25s linear; display: inline-block; } li a:hover:after, li a:focus:after { visibility: visible; transform: scaleX(1); } /* Desktop Contact Form */ #contact_form { border-radius: 5px; border: 3px solid #0074D9; background-color: #111111; padding: 20px; color: white; margin: 20px 20px; position: relative; } input[type=submit].contact { width: 100px; margin: 8px 0; } #contactinput { order: 1; } #contacttextbox { order: 2; } #contactinfo { order: 3; text-align: left; } #contactbtn { order: 4; text-align: right; } /* portfolio & projects */ .portentity { width: 90vw; max-width: 450px; } /* resume */ #resumeleft { position: fixed; width: 400px; } .fourhundred { width: 400px; margin:0 2%; } .eighthundred { min-width: 600px; max-width: 800px; margin:0 2%; }