/*general setup of page, makes google font standard for all text, removes any margins that browers may impose*/ body { font-family: 'Barlow', sans-serif; margin: 0px; } .content { margin: 150px 15% 150px 15%; } /*general styling for navigation and footer*/ ul { list-style-type: none; float: none; } li { display: inline; } li a { text-decoration: none; text-align: center; } .right { float: right; color: white; } .left { color: #B3A619; } /*navigation styling*/ .navigation { position: fixed; top: -16; width: 100%; z-index: 1; } .navigation ul { background-color: #3100B3; height: 70px; } .navigation li { font-size: 50px; } .navigation .right { padding: 22px; font-size: 22px; } .navigation a:hover { color: #B3A619; } #about, #expeditions, #media, #contact { color: #B3A619; } #contact-right { padding-right: 44px; } /*Home Page*/ .home tr td { background-color: white; vertical-align: middle; } .home img { border-radius: 10px; border: 5px solid #B3A619; } .home tr:first-child img { width: 90%; margin-top: -15; } .home tr:nth-child(2) img { width: 100%; margin-top: 10%; margin-bottom: -30; } .home tr:first-child h2 { font-size: 4vw; text-align: center; } .home tr:nth-child(2) h2 { font-size: 2.5vw; width: 90%; padding-top: 5%; margin-bottom: -30; } /*About Page Timeline*/ * { box-sizing: border-box; } /* Page Setup */ .timeline { position: relative; max-width: 1200px; margin: 0 auto; } /* The actual timeline (the vertical ruler) */ .timeline::after { content: ''; position: absolute; width: 6px; background-color: #3100B3; top: 40px; bottom: 25%; left: 50%; margin-left: -3px; z-index: -2; } /* Container around content */ .box { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; z-index: -1; } /* The circles on the timeline */ .box::after { content: ''; position: absolute; width: 15px; height: 15px; right: -12px; background-color: white; border: 5px solid #3100B3; top: 20px; border-radius: 50%; z-index: -1; } /* Place the container to the left */ .odd { left: 0; } /* Place the container to the right */ .even { left: 50%; } /* Add arrows to the left container (pointing right) */ .odd::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: -1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #B3A619; } /* Add arrows to the right container (pointing left) */ .even::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: -1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent #B3A619 transparent transparent; } /* Fix the circle for containers on the right side */ .even::after { left: -12.9px; } /* The actual content */ .info { padding: 20px 30px; background-color: #B3A619; position: relative; border-radius: 6px; z-index: -1 } .info p { margin-top: 20px; margin-bottom: 8px; } /* adds style and responsiveness to timeline images*/ .timeline img { width: 100%; border-radius: 6px; } .odd h2 { text-align: right; } #space { margin-top: 140px; } /* Expeditions Page Table styling*/ th { background-color: #B3A619; padding: 20px 25px; font-size: 20px; } table, th, td { border-collapse: collapse; } td { background-color: #E8E8E8; padding: 15px 25px; vertical-align: top; font-size: 20px; } th:first-child { border-top-left-radius: 10px; } th:last-child { border-top-right-radius: 10px; } tr:last-child td:first-child { border-bottom-left-radius: 10px; } tr:last-child td:last-child { border-bottom-right-radius: 10px; } /*Media Page*/ .videoWrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*Contact form styleing*/ /*Style inputs with type="text", select elements and textarea*/ input[type=text], select, textarea { width: 100%; padding: 12px; border-radius: 6px; margin-top: 6px; margin-bottom: 16px; resize: vertical; /*user can resize text area vertically but no horizontally*/ border: none; font-family: barlow; font-size: 15px; } /*Styling submit button*/ input[type=submit] { background-color: black; color: white; padding: 12px 20px; border:none; border-radius: 6px; cursor: pointer; /*styles mouse cursor*/ font-family: barlow; font-size: 24px; display: block; margin: 0 auto; margin-bottom: -24 } input[type=submit]:hover { background-color: #404040; } .container { border-radius: 6px; background-color: #B3A619; padding: 20px; font-size: 20px; } /*Popup styling*/ .popup { background-color: rgba( 0, 0, 0, .3); height: 100%; width: 100%; position: fixed; top: 0; z-index: 1; display: flex; justify-content: center; align-items: center; } .popup-content { background-color: #E8E8E8; width: 40%; height: 85px; opacity: 1; border-radius: 6px; text-align: center; } #vertically-centered { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popup-content h3 { padding: 0px 7% 0px 7%; } .close { font-family: sans-serif; font-weight: 900; font-size: 20px; transform: rotate(45deg); float: right; padding-right: 5px; text-decoration: none; } .close a { text-decoration: none; color: black; } /*footer styling*/ .footer ul { background-color: #B3A619; color: black; height: 60px; position: relative; margin: -270 0 0 0; bottom: -210; } .footer a { color: black; } .footer .left { position: absolute; padding-top: 20px; } .footer img { height: 30px; padding: 14px; box-sizing: content-box; } .flickr img { border-radius: 40%; } #facebook-right { padding-right: 15px; } #special ul { bottom: -340; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 900px) { /*General rearrangement*/ .content { margin: 175px 15% 150px 15%; } /* Navigation rearrangement so menu sits under title, list items width is a percentage of the screen-width, everything is centered*/ .navigation { position: fixed; } .navigation ul { height: 100px; } .navigation a { display: block; float: none; margin-right: -10px; } .navigation .right { display: inline-block; position: relative; color: white; padding: 10px 0px; width: 25%; font-size: 20px; top: -2px; right: 50px; float: right; } #contact-right { padding-right: 0px; } /*About Page Timeline*/ /* Place the timelime to the left */ .timeline::after { left: 31px; } /* Full-width containers */ .box { width: 100%; padding-left: 70px; padding-right: 25px; } /* Make sure that all arrows are pointing leftwards */ .box::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent #B3A619 transparent transparent; } /* Make sure all circles are at the same spot */ .odd::after, .even::after { left: 18.3px; } /* Make all right containers behave like the left ones */ .even { left: 0%; } #space { margin-top: 165px; } /*Table rearrangement*/ th, td { font-size: 2.23vw; } th { padding: 3% 4%; } td { padding: 3% 4%; } /*Popup rearrangement*/ .popup-content h3 { padding: 0px 10px 0px 10px; } .popup-content { width: 55%; } /* Footer rearrangement so copyright sits above social media icons, icons width is a percentage of the screen width, and everything is centered*/ .footer a { display: block; float: none; } .footer .right { display: inline-block; position: relative; top: 20px; width: 20%; right: 12%; float: right; } .footer ul { height: 70px; bottom: -200; } .footer .left { padding-top: 5px; width: 90%; text-align: center; } .footer img { height: 20px; } .footer { width: 100%; } #facebook-right { padding-right: 0px; } }