* { box-sizing: border-box; } body { background-color: /*#F8F567*/ #232323 ; color: #666666; font-family: Arial, Helvetica #f8f567, sans-serif; margin-left: 0; width: 100%;} .rch { color: #D3D3D3; font-weight: bold; font-family: Arial, Helvetica; } .rch2 { color: #232323; font-weight: bold; font-family: Arial, Helvetica; } .rch3 { color: #0076A3; font-family: Arial, Helvetica; font-weight: bold; } #wrapper { background-color: #000000; } #contact { font-size: 90%; font-family: Arial, Helvetica; } form { display: flex; flex-flow: column nowrap; } input, textarea { margin-bottom: .5em; } @media (min-width: 320px) { #webslide0 { height: 650px; background-image: url(webslide0m.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide1 { height: 650px; background-image: url(webslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide2 { height: 650px; background-image: url(webslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide3 { height: 650px; background-image: url(webslide3m.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide4 { height: 650px; background-image: url(webslide4m.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide5 { height: 650px; background-image: url(webslide5m.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide6 { height: 650px; background-image: url(webslide6m.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide7 { height: 650px; background-image: url(webslide7m.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide0v2 { height: 650px; background-image: url(webslide0m2.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide1 { height: 625px; background-image: url(qpfslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide2 { height: 625px; background-image: url(qpfslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpoutput { height: 625px; background-image: url(qpoutputm.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide1 { height: 625px; background-image: url(lnfslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide2 { height: 625px; background-image: url(lnfslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnoutput { height: 625px; background-image: url(lnoutputm.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide1 { height: 625px; background-image: url(otdfslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide2 { height: 625px; background-image: url(otdfslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdoutput { height: 625px; background-image: url(otdoutputm.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide1 { height: 625px; background-image: url(cadfslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide2 { height: 625px; background-image: url(cadfslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadoutput { height: 625px; background-image: url(cadoutputm.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide1 { height: 625px; background-image: url(bbfslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide2 { height: 625px; background-image: url(bbfslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #bboutput { height: 625px; background-image: url(bboutputm.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide1 { height: 625px; background-image: url(mfslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide2 { height: 625px; background-image: url(mfslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #mpoutput { height: 625px; background-image: url(mpoutputm.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide1 { height: 625px; background-image: url(jfslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide2 { height: 625px; background-image: url(jfslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #jpoutput { height: 625px; background-image: url(jpoutputm.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide1 { height: 625px; background-image: url(rwfslide1m.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide2 { height: 625px; background-image: url(rwfslide2m.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwoutput { height: 625px; background-image: url(rwoutputm.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadad { height: 625px; background-image: url(downloadadm.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadfeatures { height: 625px; background-image: url(downloadfeaturesm.png); background-size: 100% 100%; background-repeat: no-repeat; } #contactsocialstxt1 { height: 220px; background-image: url(contactsocialstxt1m.png); background-size: 100% 100%; background-repeat: no-repeat; border: none; } #contactsocialstxt2 { height: 220px; background-image: url(contactsocialstxt2m.png); background-size: 100% 100%; background-repeat: no-repeat; border: none;} #macad { height: 625px; background-image: url(macadm.png); background-size: 100% 100%; background-repeat: no-repeat; } #instructions { height: 625px; background-image: url(instructionsm.png); background-size: 100% 100%; background-repeat: no-repeat; } #windowsad { height: 625px; background-image: url(windowsadm.png); background-size: 100% 100%; background-repeat: no-repeat; } #ucslide0 { height: 400px; background-image: url(ucslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } .banner { margin-top: 45px; } .fixed-nav-bar { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; } nav { font-weight: bold; padding: 0; font-size: 100%; text-align: center; } nav a { text-decoration: none; font-family: Arial, Helvetica} nav { font-weight: bold; padding: 0; font-size: 130%; text-align: center; background-color: #0071bc; } nav ul {margin: 0; padding-left: 0; font-size: 1.2em; list-style-type: none; } nav li { border-bottom: 1px solid #002171; } nav a:link { color: #D3D3D3; } nav a:visited { color: #232323; } nav a:hover { color: #232323; } h3 { color: #666666; font-family: Arial, "Times New Roman", Serif;} h4 { color: #0076A3; font-family: Arial, "Times New Roman", Serif;} footer { font-size: 75%; font-style: normal; text-align: center; font-family: Arial, "Times New Roman", Serif; padding: 2em; background-color: #0071bc; } main { padding-top: 1px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; display: block; background-color: #232323; overflow: auto; font-family: Arial, Helvetica} main ul { list-style-type: circle; font-family: Arial, Helvetica} div { background-color: #232323; } #wrapper { display: grid; margin: auto; margin-top: 45px; width: 100%; /* box-shadow: 5px 5px 5px #000000;*/ grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } #gallery { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-around; } #videoplay { display: grid; margin: auto; justify-content: space-around; } #img { background-color: #FFFFFF;} #special { grid-row: auto; grid-column: 1 / 5; } nav { grid-row: auto; grid-column: 1 / 6; } div { grid-row: auto; grid-column: 1 / 6; } main { grid-row: auto; grid-column: 1 / 6; } footer { grid-row: auto; grid-column: 1 / 6; } video { height: 100vh; width: 100%; object-fit: fill; position: absolute; } .container { position: relative; overflow: hidden; width: 100%; padding-top: 41%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /* Style the navigation menu */ .topnav { overflow: hidden; background-color: #111111; /* background: none; *//* position: relative; */ position: fixed; z-index: 9999; width: 100%; top: 0; left: 0; } /* Hide the links inside the navigation menu (except for logo/home) */ .topnav #myLinks { display: none; } /* Style navigation menu links */ .topnav a { color: #d3d3d3; padding: 14px 16px; text-decoration: none; font-size: 18px; display: block; font-family: Arial, Helvetica; font-weight: bold; } /* Style the hamburger menu */ .topnav a.icon { background: #000000; display: block; position: absolute; right: 0; top: 0; } /* Add a grey background color on mouse-over */ .topnav a:hover { background-color: #f44336; color: black; } /* Style the active link (or home/logo) */ .active { background-color: #0071bc; color: #d3d3d3; } .row { display: flex; } .column { flex: 33.33%; /* padding: 5px;*/ } /* The alert message box */ /* .alert { padding: 20px; background-color: #f44336; color: white; margin-bottom: 15px; font-family: Arial, Helvetica; font-size: 12px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:99; }*/ /* The close button */ /* .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 25px; line-height: 20px; cursor: pointer; transition: 0.3s; }*/ /* When moving the mouse over the close button */ /* .closebtn:hover { color: black; }*/ } @media (min-width: 600px) { #webslide0 { height: 400px; background-image: url(webslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide1 { height: 400px; background-image: url(webslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide2 { height: 400px; background-image: url(webslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide3 { height: 400px; background-image: url(webslide3.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide4 { height: 400px; background-image: url(webslide4.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide5 { height: 400px; background-image: url(webslide5.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide6 { height: 400px; background-image: url(webslide6.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide7 { height: 400px; background-image: url(webslide7.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide1 { height: 475px; background-image: url(qpfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide2 { height: 475px; background-image: url(qpfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpoutput { height: 475px; background-image: url(qpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide1 { height: 475px; background-image: url(lnfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide2 { height: 475px; background-image: url(lnfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnoutput { height: 475px; background-image: url(lnoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide1 { height: 475px; background-image: url(otdfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide2 { height: 475px; background-image: url(otdfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdoutput { height: 475px; background-image: url(otdoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide1 { height: 475px; background-image: url(cadfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide2 { height: 475px; background-image: url(cadfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadoutput { height: 475px; background-image: url(cadoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide1 { height: 475px; background-image: url(bbfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide2 { height: 475px; background-image: url(bbfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #bboutput { height: 475px; background-image: url(bboutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide1 { height: 475px; background-image: url(mfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide2 { height: 475px; background-image: url(mfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #mpoutput { height: 475px; background-image: url(mpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide1 { height: 475px; background-image: url(jfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide2 { height: 475px; background-image: url(jfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #jpoutput { height: 475px; background-image: url(jpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide1 { height: 475px; background-image: url(rwfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide2 { height: 475px; background-image: url(rwfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwoutput { height: 475px; background-image: url(rwoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadad { height: 400px; background-image: url(downloadad.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadfeatures { height: 400px; background-image: url(downloadfeatures.png); background-size: 100% 100%; background-repeat: no-repeat; } #contactsocialstxt1 { height: 220px; background-image: url(contactsocialstxt1m.png); background-size: 100% 100%; background-repeat: no-repeat; border: none; } #contactsocialstxt2 { height: 220px; background-image: url(contactsocialstxt2m.png); background-size: 100% 100%; background-repeat: no-repeat; border: none;} #macad { height: 400px; background-image: url(macad.png); background-size: 100% 100%; background-repeat: no-repeat; } #instructions { height: 400px; background-image: url(instructions.png); background-size: 100% 100%; background-repeat: no-repeat; } #windowsad { height: 400px; background-image: url(windowsad.png); background-size: 100% 100%; background-repeat: no-repeat; } #ucslide0 { height: 500px; background-image: url(ucslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } .banner { margin-top: 45px; } .fixed-nav-bar { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; } nav { font-weight: bold; padding: 0; font-size: 130%; text-align: center; } nav a { text-decoration: none; font-family: Arial, Helvetica} nav { text-align: center; padding-left: 1em; padding-right: 1em; background-color: #0071bc; } nav ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; } nav li { border-bottom: none; padding-top: 1em; padding-bottom: 1em; } nav a:link { color: #D3D3D3; } nav a:visited { color: #232323; } nav a:hover { color: #232323; } h3 { color: #666666; font-family: Arial, "Times New Roman", Serif;} h4 { color: #0076A3; font-family: Arial, "Times New Roman", Serif;} footer { font-size: 75%; font-style: normal; text-align: center; font-family: Arial, "Times New Roman", Serif; padding: 2em; background-color: #0071bc; } main { padding-top: 1px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; display: block; background-color: #232323; overflow: auto; font-family: Arial, Helvetica} main ul { list-style-type: circle; font-family: Arial, Helvetica} div { background-color: #232323; } #wrapper { display: grid; margin: auto; margin-top: 45px; width: 100%; /* box-shadow: 5px 5px 5px #000000; */ grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } #gallery { display: flex; flex-direction: row; flex-wrap: wrap; box-shadow: 5px 5px 5px #000000; justify-content: space-around; } #videoplay { display: grid; margin: auto; justify-content: space-around; } #img { background-color: #FFFFFF;} #special { grid-row: auto; grid-column: 1 / 5; } nav { grid-row: auto ; grid-column: 1 / 6; } div { grid-row: auto; grid-column: 1 / 6; } main { grid-row: auto; grid-column: 1 / 6; } footer { grid-row: auto; grid-column: 1 / 6; } video { height: 100vh; width: 100%; object-fit: fill; position: absolute; } .container { position: relative; overflow: hidden; width: 100%; padding-top: 41%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /* Style the navigation menu */ .topnav { overflow: hidden; background-color: #111111; /* background: none; *//* position: relative; */ position: fixed; z-index: 9999; width: 100%; top: 0; left: 0; } /* Hide the links inside the navigation menu (except for logo/home) */ .topnav #myLinks { display: none; } /* Style navigation menu links */ .topnav a { color: #d3d3d3; padding: 14px 16px; text-decoration: none; font-size: 20px; display: block; font-family: Arial, Helvetica; font-weight: bold; } /* Style the hamburger menu */ .topnav a.icon { background: #000000; display: block; position: absolute; right: 0; top: 0; } /* Add a grey background color on mouse-over */ .topnav a:hover { background-color: #f44336; color: black; } /* Style the active link (or home/logo) */ .active { background-color: #0071bc; color: #d3d3d3; } .row { display: flex; } .column { flex: 33.33%; padding: 5px; } /* The alert message box */ /* .alert { padding: 20px; background-color: #f44336; color: white; margin-bottom: 15px; font-family: Arial, Helvetica; font-size: 14px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:99; }*/ /* The close button */ /* .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 25px; line-height: 20px; cursor: pointer; transition: 0.3s; }*/ /* When moving the mouse over the close button */ /* .closebtn:hover { color: black; }*/ } @media (min-width: 720px) { #webslide0 { height: 400px; background-image: url(webslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide1 { height: 500px; background-image: url(webslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide2 { height: 500px; background-image: url(webslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide3 { height: 500px; background-image: url(webslide3.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide4 { height: 500px; background-image: url(webslide4.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide5 { height: 500px; background-image: url(webslide5.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide6 { height: 500px; background-image: url(webslide6.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide7 { height: 500px; background-image: url(webslide7.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide1 { height: 550px; background-image: url(qpfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide2 { height: 550px; background-image: url(qpfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpoutput { height: 550px; background-image: url(qpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide1 { height: 550px; background-image: url(lnfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide2 { height: 550px; background-image: url(lnfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnoutput { height: 550px; background-image: url(lnoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide1 { height: 550px; background-image: url(otdfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide2 { height: 550px; background-image: url(otdfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdoutput { height: 550px; background-image: url(otdoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide1 { height: 550px; background-image: url(cadfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide2 { height: 550px; background-image: url(cadfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadoutput { height: 550px; background-image: url(cadoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide1 { height: 550px; background-image: url(bbfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide2 { height: 550px; background-image: url(bbfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #bboutput { height: 550px; background-image: url(bboutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide1 { height: 550px; background-image: url(mfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide2 { height: 550px; background-image: url(mfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #mpoutput { height: 550px; background-image: url(mpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide1 { height: 550px; background-image: url(jfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide2 { height: 550px; background-image: url(jfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #jpoutput { height: 550px; background-image: url(jpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide1 { height: 550px; background-image: url(rwfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide2 { height: 550px; background-image: url(rwfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwoutput { height: 550px; background-image: url(rwoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadad { height: 450px; background-image: url(downloadad.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadfeatures { height: 450px; background-image: url(downloadfeatures.png); background-size: 100% 100%; background-repeat: no-repeat; } #contactsocialstxt1 { height: 220px; background-image: url(contactsocialstxt1.png); background-size: 100% 100%; background-repeat: no-repeat; border: none; } #contactsocialstxt2 { height: 220px; background-image: url(contactsocialstxt2.png); background-size: 100% 100%; background-repeat: no-repeat; border: none;} #macad { height: 450px; background-image: url(macad.png); background-size: 100% 100%; background-repeat: no-repeat; } #instructions { height: 450px; background-image: url(instructions.png); background-size: 100% 100%; background-repeat: no-repeat; } #windowsad { height: 450px; background-image: url(windowsad.png); background-size: 100% 100%; background-repeat: no-repeat; } #ucslide0 { height: 500px; background-image: url(ucslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } .banner { margin-top: 45px; } .fixed-nav-bar { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; } nav { font-weight: bold; padding: 0; font-size: 130%; text-align: center; } nav a { text-decoration: none; font-family: Arial, Helvetica} nav { text-align: center; padding-left: 1em; padding-right: 1em; background-color: #0071bc; } nav ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; } nav li { border-bottom: none; padding-top: 1em; padding-bottom: 1em; } nav a:link { color: #D3D3D3; } nav a:visited { color: #232323; } nav a:hover { color: #232323; } h3 { color: #666666; font-family: Arial, "Times New Roman", Serif;} h4 { color: #0076A3; font-family: Arial, "Times New Roman", Serif;} footer { font-size: 75%; font-style: normal; text-align: center; font-family: Arial, "Times New Roman", Serif; padding: 2em; background-color: #0071bc; } main { padding-top: 1px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; display: block; background-color: #232323; overflow: auto; font-family: Arial, Helvetica} main ul { list-style-type: circle; font-family: Arial, Helvetica} div { background-color: #232323; } #wrapper { display: grid; margin: auto; margin-top: 45px; width: 100%; /* box-shadow: 5px 5px 5px #000000; */ grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } #gallery { display: flex; flex-direction: row; flex-wrap: wrap; box-shadow: 5px 5px 5px #000000; justify-content: space-around; } #videoplay { display: grid; margin: auto; justify-content: space-around; } #img { background-color: #FFFFFF;} #special { grid-row: auto; grid-column: 1 / 5; } nav { grid-row: auto ; grid-column: 1 / 6; } div { grid-row: auto; grid-column: 1 / 6; } main { grid-row: auto; grid-column: 1 / 6; } footer { grid-row: auto; grid-column: 1 / 6; } video { height: 100vh; width: 100%; object-fit: fill; position: absolute; } .container { position: relative; overflow: hidden; width: 100%; padding-top: 41%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /* Style the navigation menu */ .topnav { overflow: hidden; background-color: #111111; /* background: none; *//* position: relative; */ position: fixed; z-index: 9999; width: 100%; top: 0; left: 0; } /* Hide the links inside the navigation menu (except for logo/home) */ .topnav #myLinks { display: none; } /* Style navigation menu links */ .topnav a { color: #d3d3d3; padding: 14px 16px; text-decoration: none; font-size: 22px; display: block; font-family: Arial, Helvetica; font-weight: bold; } /* Style the hamburger menu */ .topnav a.icon { background: #000000; display: block; position: absolute; right: 0; top: 0; } /* Add a grey background color on mouse-over */ .topnav a:hover { background-color: #f44336; color: black; } /* Style the active link (or home/logo) */ .active { background-color: #0071bc; color: #d3d3d3; } .row { display: flex; } .column { flex: 33.33%; padding: 5px; } /* The alert message box */ /* .alert { padding: 20px; background-color: #f44336; color: white; margin-bottom: 15px; font-family: Arial, Helvetica; font-size: 16px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:99; }*/ /* The close button */ /* .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 25px; line-height: 20px; cursor: pointer; transition: 0.3s; }*/ /* When moving the mouse over the close button */ /* .closebtn:hover { color: black; }*/ } @media ( min-width: 1024px ) { #webslide0 { height: 600px; background-image: url(webslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide1 { height: 600px; background-image: url(webslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide2 { height: 600px; background-image: url(webslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide3 { height: 600px; background-image: url(webslide3.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide4 { height: 600px; background-image: url(webslide4.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide5 { height: 600px; background-image: url(webslide5.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide6 { height: 600px; background-image: url(webslide6.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide7 { height: 600px; background-image: url(webslide7.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide1 { height: 800px; background-image: url(qpfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide2 { height: 800px; background-image: url(qpfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpoutput { height: 800px; background-image: url(qpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide1 { height: 800px; background-image: url(lnfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide2 { height: 800px; background-image: url(lnfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnoutput { height: 800px; background-image: url(lnoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide1 { height: 800px; background-image: url(otdfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide2 { height: 800px; background-image: url(otdfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdoutput { height: 800px; background-image: url(otdoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide1 { height: 800px; background-image: url(cadfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide2 { height: 800px; background-image: url(cadfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadoutput { height: 800px; background-image: url(cadoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide1 { height: 800px; background-image: url(bbfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide2 { height: 800px; background-image: url(bbfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #bboutput { height: 800px; background-image: url(bboutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide1 { height: 800px; background-image: url(mfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide2 { height: 800px; background-image: url(mfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #mpoutput { height: 800px; background-image: url(mpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide1 { height: 800px; background-image: url(jfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide2 { height: 800px; background-image: url(jfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #jpoutput { height: 800px; background-image: url(jpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide1 { height: 800px; background-image: url(rwfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide2 { height: 800px; background-image: url(rwfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwoutput { height: 800px; background-image: url(rwoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadad { height: 600px; background-image: url(downloadad.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadfeatures { height: 600px; background-image: url(downloadfeatures.png); background-size: 100% 100%; background-repeat: no-repeat; } #contactsocialstxt1 { height: 220px; background-image: url(contactsocialstxt1.png); background-size: 100% 100%; background-repeat: no-repeat; border: none; } #contactsocialstxt2 { height: 220px; background-image: url(contactsocialstxt2.png); background-size: 100% 100%; background-repeat: no-repeat; border: none;} #macad { height: 600px; background-image: url(macad.png); background-size: 100% 100%; background-repeat: no-repeat; } #instructions { height: 600px; background-image: url(instructions.png); background-size: 100% 100%; background-repeat: no-repeat; } #windowsad { height: 600px; background-image: url(windowsad.png); background-size: 100% 100%; background-repeat: no-repeat; } #ucslide0 { height: 600px; background-image: url(ucslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } .banner { margin-top: 45px; } .fixed-nav-bar { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; } nav { font-weight: bold; padding: 0; font-size: 130%; text-align: center; } nav a { text-decoration: none; font-family: Arial, Helvetica} nav { text-align: center; padding-left: 1em; padding-right: 1em; background-color: #0071bc; } nav ul { display: flex; flex-direction: row; } nav { text-align: center; /* padding-top: 1em; padding-bottom: 1em; padding-left: 1em; padding-right: 1em;*/ background-color: #0071bc; } nav li { padding-top: 1em; } nav a:link { color: #D3D3D3; } nav a:visited { color: #232323; } nav a:hover { color: #D3D3D3; } h3 { color: #666666; font-family: Arial, "Times New Roman", Serif;} h4 { color: #0076A3; font-family: Arial, "Times New Roman", Serif;} footer { font-size: 75%; font-style: normal; text-align: center; font-family: Arial, "Times New Roman", Serif; padding: 2em; background-color: #0071bc; } main { padding-top: 1px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; display: block; background-color: #232323; overflow: auto; font-family: Arial, Helvetica} main ul { list-style-type: circle; font-family: Arial, Helvetica; } div { background-color: #232323; } #wrapper { display: grid; margin: auto; margin-top: 45px; width: 100%; /* box-shadow: 5px 5px 5px #000000; */ grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } #gallery { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } #videoplay { display: grid; margin: auto; justify-content: space-around; } #img { background-color: #FFFFFF; } #img2 { background-color: #FFFFFF; margin-left: 9em;} #img3 { background-color: #FFFFFF; margin-left: 18em;} #special { grid-row: auto; grid-column: 1 / 6; margin: 0; } /* img { margin: 1em; box-shadow: 10px 10px 10px #000000; }*/ nav { grid-row: auto ; grid-column: 1 / 6; } div { grid-row: auto; grid-column: 1 / 6; } main { grid-row: auto; grid-column: 1 / 6; } footer { grid-row: auto; grid-column: 1 / 6; } video { height: 100vh; width: 100%; object-fit: fill; position: absolute; } .container { position: relative; overflow: hidden; width: 100%; padding-top: 41%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /* Style the navigation menu */ .topnav { overflow: hidden; background-color: #111111; /* background: none; *//* position: relative; */ position: fixed; z-index: 9999; width: 100%; top: 0; left: 0; } /* Hide the links inside the navigation menu (except for logo/home) */ .topnav #myLinks { display: none; } /* Style navigation menu links */ .topnav a { color: #d3d3d3; padding: 14px 16px; text-decoration: none; font-size: 24px; display: block; font-family: Arial, Helvetica; font-weight: bold; } /* Style the hamburger menu */ .topnav a.icon { background: #000000; display: block; position: absolute; right: 0; top: 0; } /* Add a grey background color on mouse-over */ .topnav a:hover { background-color: #f44336; color: black; } /* Style the active link (or home/logo) */ .active { background-color: #0071bc; color: #d3d3d3; } .row { display: flex; } .column { flex: 33.33%; padding: 5px; } /* The alert message box */ /* .alert { padding: 20px; background-color: #f44336; color: white; margin-bottom: 15px; font-family: Arial, Helvetica; font-size: 18px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:99; }*/ /* The close button */ /* .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 25px; line-height: 20px; cursor: pointer; transition: 0.3s; }*/ /* When moving the mouse over the close button */ /* .closebtn:hover { color: black; } */ } @media ( min-width: 1280px ) { #webslide0 { height: 650px; background-image: url(webslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide1 { height: 750px; background-image: url(webslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide2 { height: 750px; background-image: url(webslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide3 { height: 750px; background-image: url(webslide3.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide4 { height: 750px; background-image: url(webslide4.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide5 { height: 750px; background-image: url(webslide5.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide6 { height: 750px; background-image: url(webslide6.png); background-size: 100% 100%; background-repeat: no-repeat; } #webslide7 { height: 750px; background-image: url(webslide7.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide1 { height: 800px; background-image: url(qpfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpfslide2 { height: 800px; background-image: url(qpfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #qpoutput { height: 800px; background-image: url(qpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide1 { height: 800px; background-image: url(lnfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnfslide2 { height: 800px; background-image: url(lnfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #lnoutput { height: 800px; background-image: url(lnoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide1 { height: 800px; background-image: url(otdfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdfslide2 { height: 800px; background-image: url(otdfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #otdoutput { height: 800px; background-image: url(otdoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide1 { height: 800px; background-image: url(cadfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadfslide2 { height: 800px; background-image: url(cadfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #cadoutput { height: 800px; background-image: url(cadoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide1 { height: 800px; background-image: url(bbfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #bbfslide2 { height: 800px; background-image: url(bbfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #bboutput { height: 800px; background-image: url(bboutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide1 { height: 800px; background-image: url(mfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #mfslide2 { height: 800px; background-image: url(mfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #mpoutput { height: 800px; background-image: url(mpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide1 { height: 800px; background-image: url(jfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #jfslide2 { height: 800px; background-image: url(jfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #jpoutput { height: 800px; background-image: url(jpoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide1 { height: 800px; background-image: url(rwfslide1.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwfslide2 { height: 800px; background-image: url(rwfslide2.png); background-size: 100% 100%; background-repeat: no-repeat; } #rwoutput { height: 800px; background-image: url(rwoutput.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadad { height: 650px; background-image: url(downloadad.png); background-size: 100% 100%; background-repeat: no-repeat; } #downloadfeatures { height: 650px; background-image: url(downloadfeatures.png); background-size: 100% 100%; background-repeat: no-repeat; } #contactsocialstxt1 { height: 220px; background-image: url(contactsocialstxt1.png); background-size: 100% 100%; background-repeat: no-repeat; border: none; } #contactsocialstxt2 { height: 220px; background-image: url(contactsocialstxt2.png); background-size: 100% 100%; background-repeat: no-repeat; border: none;} #macad { height: 650px; background-image: url(macad.png); background-size: 100% 100%; background-repeat: no-repeat; } #instructions { height: 650px; background-image: url(instructions.png); background-size: 100% 100%; background-repeat: no-repeat; } #windowsad { height: 650px; background-image: url(windowsad.png); background-size: 100% 100%; background-repeat: no-repeat; } #ucslide0 { height: 600px; background-image: url(ucslide0.png); background-size: 100% 100%; background-repeat: no-repeat; } .banner { margin-top: 45px; } .fixed-nav-bar { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; } nav { font-weight: bold; padding: 0; font-size: 130%; text-align: center; } nav a { text-decoration: none; font-family: Arial, Helvetica} nav { text-align: center; padding-left: 1em; padding-right: 1em; background-color: #0071bc; } nav ul { display: flex; flex-direction: row; } nav { text-align: center; /* padding-top: 1em; padding-bottom: 1em; padding-left: 1em; padding-right: 1em;*/ background-color: #0071bc; } nav li { padding-top: 1em; } nav a:link { color: #D3D3D3; } nav a:visited { color: #232323; } nav a:hover { color: #D3D3D3; } h3 { color: #666666; font-family: Arial, "Times New Roman", Serif;} h4 { color: #0076A3; font-family: Arial, "Times New Roman", Serif;} footer { font-size: 75%; font-style: normal; text-align: center; font-family: Arial, "Times New Roman", Serif; padding: 2em; background-color: #0071bc; } main { padding-top: 1px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; display: block; background-color: #232323; overflow: auto; font-family: Arial, Helvetica} main ul { list-style-type: circle; font-family: Arial, Helvetica; } div { background-color: #232323; } #wrapper { display: grid; margin: auto; margin-top: 60px; width: 100%; /* box-shadow: 5px 5px 5px #000000; */ grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } #gallery { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } #videoplay { display: grid; margin: auto; justify-content: space-around; } #img { background-color: #FFFFFF; } #img2 { background-color: #FFFFFF; margin-left: 9em;} #img3 { background-color: #FFFFFF; margin-left: 18em;} #special { grid-row: auto; grid-column: 1 / 6; margin: 0; } /* img { margin: 1em; box-shadow: 10px 10px 10px #000000; }*/ nav { grid-row: auto ; grid-column: 1 / 6; } div { grid-row: auto; grid-column: 1 / 6; } main { grid-row: auto; grid-column: 1 / 6; } footer { grid-row: auto; grid-column: 1 / 6; } video { height: 100vh; width: 100%; object-fit: fill; position: absolute; } .container { position: relative; overflow: hidden; width: 100%; padding-top: 41%; /* 56.25% 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ /* 75% 4:3 Aspect Ratio */ /* 66.66% 3:2 Aspect Ratio */ /* 62.5% 8:5 Aspect Ratio */ /* 100% 1:1 Aspect Ratio */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /* Style the navigation menu */ .topnav { overflow: hidden; background-color: #111111; /* background: none; *//* position: relative; */ position: fixed; z-index: 9999; width: 100%; top: 0; left: 0; } /* Hide the links inside the navigation menu (except for logo/home) */ .topnav #myLinks { display: none; } /* Style navigation menu links */ .topnav a { color: #d3d3d3; padding: 14px 16px; text-decoration: none; font-size: 26px; display: block; font-family: Arial, Helvetica; font-weight: bold; } /* Style the hamburger menu */ .topnav a.icon { background: #000000; display: block; position: absolute; right: 0; top: 0; } /* Add a grey background color on mouse-over */ .topnav a:hover { background-color: #f44336; color: black; } /* Style the active link (or home/logo) */ .active { background-color: #0071bc; color: #d3d3d3; } .row { display: flex; } .column { flex: 33.33%; padding: 5px; } /* The alert message box */ /* .alert { padding: 20px; background-color: #f44336; color: white; margin-bottom: 15px; font-family: Arial, Helvetica; font-size: 20px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:99; }*/ /* The close button */ /* .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 25px; line-height: 20px; cursor: pointer; transition: 0.3s; }*/ /* When moving the mouse over the close button */ /* .closebtn:hover { color: black; }*/ }