@charset "UTF-8"; * { margin: 0; padding: 0; border: 0; } body { height: 100%; width: 100%; background-color: #ffffff; font-family: "Inconsolata", sans-serif; } nav { margin: auto; } ul { height: 100%; width: 100%; list-style-type: none; overflow: visible; } li { height: 100%; width: 12%; float: right; } a { text-decoration: none; display: block; } a:focus { outline: none; } li a { margin: auto; line-height: 60px; font-size: 100%; color: #ffffff; text-align: center; } li a:hover { text-decoration: underline; } .page{ background-image: url("images/Ripstop.png"); background-repeat:no-repeat; } .page-header { height: 75px; width: 100%; background-color: #00b8d4; border-top: 20px solid #0088a3; position: fixed; top: 0px; z-index: 10; } .top-logo { height: 50px; width: 100%; position: fixed; top: 25px; } .navigation-links { height: 20px; width: 70%; position: fixed; top: 34px; } .page-navigation { height: 100%; width: 70%; } .active-link a { text-decoration: underline; } .page-image-desktop { margin: 0px auto 0px auto; border: 1px none #00675b; width: 100%; display: block; } .page-image-mobile { margin: 0px auto 0px auto; border: 1px none #00675b; width: 100%; display: none; } .page-overview { margin: 120px auto 20px auto; height: auto; width: 70%; } .page-overview h1 { padding: 20px 0px 20px 0px; font-size: 150%; font-weight: bold; color: #0088a3; } .page-overview h2 { padding: 0px 0px 5px 0px; font-size: 125%; font-weight: bold; color: #0088a3; } .page-overview p { padding: 0px 0px 20px 0px; font-size: 100%; text-align: justify; color: #000000; } .page-overview a { color: #0088a3; text-decoration: underline; } .page-button { text-align: center; } .shop-button { margin: 40px 0px 20px 0px; padding: 20px 60px 20px 60px; border: 0px solid #ffd740; border-radius: 10px; background-color: #ffd740; font-family: "Inconsolata", sans-serif; color: #000000; font-weight: bold; font-size: 150%; cursor: pointer; } .shop-button:hover { text-decoration: underline; } .shop { width: 100%; } .shop-row { width: 100%; clear: both; } .shop-column { margin: 0px 0px 20px 5%; width: 30%; display: block; float:left; } .shop-column:first-child { margin-left: 0px; } .shop-item a { padding: 5px 0px 0px 0px; color: #000000; text-align: center; text-decoration: none; font-size: 100%; } .shop-item a:hover { text-decoration: underline; } .shop-image { width: 100%; } .shop-item-description { margin-top: 10px; } .shop-item-description p { font-size: 100%; } .modal { display: none; position: fixed; z-index: 1; padding-top: 130px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000000; } .modal_content { position: relative; background-color: #000000; margin: auto; padding: 0px; width: 90%; max-width: 1200px; } .close { color: #ffffff; position: absolute; top: 90px; right: 80px; font-size: 48px; font-weight: bold; } .close:hover { color: #ffd740; text-decoration: none; cursor: pointer; } .slides { display: none; } .previous { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -60px; color: yellow; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -moz-user-select: none; text-decoration: none; } .previous:hover { color: #ffd740; background-color: #00b8d4; text-decoration: none; } .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -60px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; user-select: none; -webkit-user-select: none; right: 0; border-radius: 3px 0 0 3px; } .next:hover { color: #ffd740; background-color: #00b8d4; text-decoration: none; } .slide_overview { color: #ffffff; font-size: 18px; padding: 20px 20px; position: absolute; top: 0px; } .page-footer { height: 160px; width: 100%; background-color: #0088a3; position: relative; } .page-footer h3 { padding: 20px 0px 10px 0px; font-size: 100%; font-weight: normal; color: #ffffff; } .page-footer p { padding: 0px 0px 5px 0px; font-size: 80%; color: #ffffff; } .page-footer a { font-size: 80%; font-weight: normal; text-decoration: underline; color: #ffffff; } .page-details { margin: 0 auto; height: 100%; width: 70%; } .contact { height: 100%; width: 80%; float: left; } .instagram { height: 100%; width: 20%; float: right; text-align: center; } .fa { padding: 5px; font-size: 30px; width: 20px; text-align: center; text-decoration: none!important; } .fa-facebook { background: #3b5998; color: #ffffff; } .responsive-video iframe { position: absolute; margin-left: auto; margin-right: auto; top: 0; left: 0; width: 560px; height: 315px; } .responsive-video { position: relative; margin-left: auto; margin-right: auto; padding-bottom: 315px; /* Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px; height: 0; overflow: hidden; } @media only screen and (max-width: 1200px) { body { background-color: #ffffff; } } @media only screen and (max-width: 900px) { body { background-color: #ffffff; } } @media only screen and (max-width: 800px) { body { background-color: #ffffff; } .page-header { height: 70px; border-top: 10px solid #0088a3; position: fixed; top: 0px; } .top-logo { height: 50px; width: 100%; position: fixed; top: 15px; } .navigation-links { height: 20px; width: 85%; position: fixed; top: 40px; } .page-navigation { height: 100%; width: 85%; } .page-image-desktop { margin: 0px auto 0px auto; border: 1px none #00675b; width: 100%; display: none; } .page-image-mobile { margin: 0px auto 0px auto; border: 1px none #00675b; width: 100%; display: block; } .page-overview { margin: 90px auto 20px auto; height: auto; width: 85%; } .page-overview h1 { font-size: 120%; } .page-overview h2 { font-size: 105%; } .page-overview p { padding: 0px 0px 8px 0px; font-size: 80%; } .shop-item a { padding: 5px 0px 0px 0px; color: #000000; text-align: center; text-decoration: none; font-size: 80%; } .shop-item-description p { font-size: 60%; } li { height: 100%; width: 24%; float: center; } .slide_overview { padding: 5px 5px; } .responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .responsive-video { position: relative; padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px; height: 0; overflow: hidden; } }