/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* fonts */ @font-face { font-family: 'Century Gothic'; src: url('../fonts/CenturyGothic-BoldItalic.eot'); src: local('Century Gothic Bold Italic'), local('CenturyGothic-BoldItalic'), url('../fonts/CenturyGothic-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/CenturyGothic-BoldItalic.woff2') format('woff2'), url('../fonts/CenturyGothic-BoldItalic.woff') format('woff'), url('../fonts/CenturyGothic-BoldItalic.ttf') format('truetype'), url('../fonts/CenturyGothic-BoldItalic.svg#CenturyGothic-BoldItalic') format('svg'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Century Gothic'; src: url('../fonts/CenturyGothic-Italic.eot'); src: local('Century Gothic Italic'), local('CenturyGothic-Italic'), url('../fonts/CenturyGothic-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/CenturyGothic-Italic.woff2') format('woff2'), url('../fonts/CenturyGothic-Italic.woff') format('woff'), url('../fonts/CenturyGothic-Italic.ttf') format('truetype'), url('../fonts/CenturyGothic-Italic.svg#CenturyGothic-Italic') format('svg'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Century Gothic'; src: url('../fonts/CenturyGothic-Bold.eot'); src: local('Century Gothic Bold'), local('CenturyGothic-Bold'), url('../fonts/CenturyGothic-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/CenturyGothic-Bold.woff2') format('woff2'), url('../fonts/CenturyGothic-Bold.woff') format('woff'), url('../fonts/CenturyGothic-Bold.ttf') format('truetype'), url('../fonts/CenturyGothic-Bold.svg#CenturyGothic-Bold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Century Gothic'; src: url('../fonts/CenturyGothic.eot'); src: local('Century Gothic'), local('CenturyGothic'), url('../fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'), url('../fonts/CenturyGothic.woff2') format('woff2'), url('../fonts/CenturyGothic.woff') format('woff'), url('../fonts/CenturyGothic.ttf') format('truetype'), url('../fonts/CenturyGothic.svg#CenturyGothic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Segoe Script'; src: url('../fonts/SegoeScript.eot'); src: local('Segoe Script'), local('SegoeScript'), url('../fonts/SegoeScript.eot?#iefix') format('embedded-opentype'), url('../fonts/SegoeScript.woff2') format('woff2'), url('../fonts/SegoeScript.woff') format('woff'), url('../fonts/SegoeScript.ttf') format('truetype'), url('../fonts/SegoeScript.svg#SegoeScript') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Segoe Script'; src: url('../fonts/SegoeScript-Bold.eot'); src: local('Segoe Script Bold'), local('SegoeScript-Bold'), url('../fonts/SegoeScript-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/SegoeScript-Bold.woff2') format('woff2'), url('../fonts/SegoeScript-Bold.woff') format('woff'), url('../fonts/SegoeScript-Bold.ttf') format('truetype'), url('../fonts/SegoeScript-Bold.svg#SegoeScript-Bold') format('svg'); font-weight: bold; font-style: normal; } /* custom styles begin here */ html { font-size: medium; } body { font-family: "Century Gothic", sans-serif; } .container { width: 1200px; margin-left: auto; margin-right: auto; } .hdr-image { background-image: url('../img/tigers-header-2.jpg'); height: 440px; } .hdr-image-bears { background-image: url('../img/bears/wilderness_survival_gear.jpg'); height: 440px; width: 1000px; } .contact-image { background-image: url('../img/contact-header.jpg'); height: 440px; } .lion-header-image { background-image: url(../img/lions/appalachian_mountains_with_lake_in_autumn.jpg); height: 440px; } #top-bar, footer { background-color: black; color: white; padding: 1.6rem; } #top-bar a, footer a { color: white; text-decoration: none; } .logo span { font-family: "Segoe Script", cursive; } #top-bar .logo { display: inline-block; font-size: 1.8rem; } #top-bar nav { float: right; font-size: 1.25rem; } nav ul li { display: inline-block; padding: 5px 10px 10px 10px; } main, aside { float: left; padding: 25px; box-sizing: border-box; } main { width: 66%; } aside { width: 34%; } h1 { font-family: "Segoe Script", cursive; font-size: 2rem; font-weight: bold; background-image: url('../img/orange-swash.png'); background-repeat: no-repeat; background-position: center bottom; padding-bottom: 40px; margin: 10px 0 20px; display: inline-block; } h2 { font-family: "Segoe Script", cursive; font-size: 2rem; font-weight: bold; margin: 10px 0 20px; display: block; } main h2 { clear: both; } main p { line-height: 1.3; font-size: 1.5rem; } #home h1 { font-family: "Century Gothic", sans-serif; background-image: none; } #home h1, #home .slide p { color: #fff; background-color: rgba(0, 0, 0, 0.7); padding: 30px; } #home .slide p { font-family: "Segoe Script", cursive; font-size: 2.2rem; display: inline-block; margin-top: 35vh; } #home main { width: auto; float: none; padding: 0; } .slide { height: 100vh; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; text-align: center; } #slide-1 { background-image: url('../img/home/east-coast-hiking-trails-header.jpg'); text-align: center; } #slide-2 { background-image: url('../img/home/Rock-Climbing-Shoe.jpg'); } #slide-3 { background-image: url('../img/home/canoeing.jpg'); } #slide-4 { background-image: url('../img/home/vista-los-suenos-zip-line-1.jpg'); background-position: bottom; } /*aside*/ .adventures { background-color: #FD4902; color: #000; font-size: 1.2rem; } .adventures h2 { color: #fff; background-color: #000; padding: 15px; text-transform: uppercase; text-align: center; } .adventures a { color: #000; text-decoration: none; } .adventures ul { padding: 20px; } .adventures li { padding-left: 30px; padding-bottom: 15px; background-image: url("../img/bk-checkmark.png"); background-repeat: no-repeat; background-position: left top; background-size: 20px; } .adventures li:last-child { padding-bottom: 0; } /*footer*/ footer { clear: both; text-align: center; } footer .logo { font-size: 1.4rem; margin-bottom: 10px; } .copyright { font-size: 0.9rem; margin: 10px auto; } .align-left { float: left; padding: 0 10px 10px 0; } .align-right { float: right; padding: 0 10px 10px 0; } /* Style inputs with type="text", select elements and textareas */ input[type=text], select, textarea { width: 100%; /* Full width */ padding: 12px; /* Some padding */ border: 1px solid #ccc; /* Gray border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Make sure that padding and width stays in place */ margin-top: 6px; /* Add a top margin */ margin-bottom: 16px; /* Bottom margin */ resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */ } /* Style the submit button with a specific background color etc */ input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } /* When moving the mouse over the submit button, add a darker green color */ input[type=submit]:hover { background-color: #45a049; } /* Add a background color and some padding around the form */ .contact-form { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } .contact-main-content { display: inline-block; max-width: 1200px; width: 33%; vertical-align: top; } .iframe-container { position: relative; overflow: hidden; padding-top: 95.257%; } .iframe-container iframe { position: absolute; top: 0; left: 0; border: 0; height: 100%; width: 100%; } .has-drop-down { position: relative; } .has-drop-down ul { position: absolute; top: 50px; z-index: 100; } nav ul li.has-drop-down:hover ul li { height: 2em; visibility: visible; } nav ul li { display: inline-block; padding: 5px 10px 10px 10px; } nav ul li ul li { display: block; background-color: black; white-space: nowrap; padding: 20px; transition: all 2s ease-in-out; height: 0; visibility: hidden; box-sizing: border-box; } nav ul li ul li:last-child { padding-bottom: 30px; } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width: 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width: 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* Styles */ } /********** iPad 3 **********/ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { /* Styles */ } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width: 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width: 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { /* Styles */ } /* iPhone 5 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* Styles */ } /* iPhone 6, 7, 8 ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* Styles */ } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* Styles */ } /* iPhone 6+, 7+, 8+ ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* Styles */ } /* iPhone X ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) { /* Styles */ } @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) { /* Styles */ } /* iPhone XS Max, XR ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) { /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) { /* Styles */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* Styles */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) { /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) { /* Styles */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) { /* Styles */ } @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) { /* Styles */ }