@charset "UTF-8"; .width-1 { width: 1vw; } .width-1-pixels { width: 1px; } .width-1-percents { width: calc(1*1%); } .width-5 { width: 5vw; } .width-5-pixels { width: 5px; } .width-5-percents { width: calc(5*1%); } .width-10 { width: 10vw; } .width-10-pixels { width: 10px; } .width-10-percents { width: calc(10*1%); } .width-15 { width: 15vw; } .width-15-pixels { width: 15px; } .width-15-percents { width: calc(15*1%); } .width-20 { width: 20vw; } .width-20-pixels { width: 20px; } .width-20-percents { width: calc(20*1%); } .width-25 { width: 25vw; } .width-25-pixels { width: 25px; } .width-25-percents { width: calc(25*1%); } .width-30 { width: 30vw; } .width-30-pixels { width: 30px; } .width-30-percents { width: calc(30*1%); } .width-35 { width: 35vw; } .width-35-pixels { width: 35px; } .width-35-percents { width: calc(35*1%); } .width-40 { width: 40vw; } .width-40-pixels { width: 40px; } .width-40-percents { width: calc(40*1%); } .width-45 { width: 45vw; } .width-45-pixels { width: 45px; } .width-45-percents { width: calc(45*1%); } .width-50 { width: 50vw; } .width-50-pixels { width: 50px; } .width-50-percents { width: calc(50*1%); } .width-55 { width: 55vw; } .width-55-pixels { width: 55px; } .width-55-percents { width: calc(55*1%); } .width-60 { width: 60vw; } .width-60-pixels { width: 60px; } .width-60-percents { width: calc(60*1%); } .width-65 { width: 65vw; } .width-65-pixels { width: 65px; } .width-65-percents { width: calc(65*1%); } .width-70 { width: 70vw; } .width-70-pixels { width: 70px; } .width-70-percents { width: calc(70*1%); } .width-75 { width: 75vw; } .width-75-pixels { width: 75px; } .width-75-percents { width: calc(75*1%); } .width-80 { width: 80vw; } .width-80-pixels { width: 80px; } .width-80-percents { width: calc(80*1%); } .width-85 { width: 85vw; } .width-85-pixels { width: 85px; } .width-85-percents { width: calc(85*1%); } .width-90 { width: 90vw; } .width-90-pixels { width: 90px; } .width-90-percents { width: calc(90*1%); } .width-95 { width: 95vw; } .width-95-pixels { width: 95px; } .width-95-percents { width: calc(95*1%); } .width-100 { width: 100vw; } .width-100-pixels { width: 100px; } .width-100-percents { width: calc(100*1%); } .width-200 { width: 200vw; } .width-200-pixels { width: 200px; } .width-200-percents { width: calc(200*1%); } .width-300 { width: 300vw; } .width-300-pixels { width: 300px; } .width-300-percents { width: calc(300*1%); } .width-400 { width: 400vw; } .width-400-pixels { width: 400px; } .width-400-percents { width: calc(400*1%); } .width-500 { width: 500vw; } .width-500-pixels { width: 500px; } .width-500-percents { width: calc(500*1%); } .width-600 { width: 600vw; } .width-600-pixels { width: 600px; } .width-600-percents { width: calc(600*1%); } .width-700 { width: 700vw; } .width-700-pixels { width: 700px; } .width-700-percents { width: calc(700*1%); } .width-800 { width: 800vw; } .width-800-pixels { width: 800px; } .width-800-percents { width: calc(800*1%); } .width-900 { width: 900vw; } .width-900-pixels { width: 900px; } .width-900-percents { width: calc(900*1%); } .width-1000 { width: 1000vw; } .width-1000-pixels { width: 1000px; } .width-1000-percents { width: calc(1000*1%); } .width-max-content { width: -moz-max-content; width: max-content; } .height-1 { height: 1vw; } .height-1-pixels { height: 1px; } .height-1-percents { height: calc(1*1%); } .height-5 { height: 5vw; } .height-5-pixels { height: 5px; } .height-5-percents { height: calc(5*1%); } .height-10 { height: 10vw; } .height-10-pixels { height: 10px; } .height-10-percents { height: calc(10*1%); } .height-15 { height: 15vw; } .height-15-pixels { height: 15px; } .height-15-percents { height: calc(15*1%); } .height-20 { height: 20vw; } .height-20-pixels { height: 20px; } .height-20-percents { height: calc(20*1%); } .height-25 { height: 25vw; } .height-25-pixels { height: 25px; } .height-25-percents { height: calc(25*1%); } .height-30 { height: 30vw; } .height-30-pixels { height: 30px; } .height-30-percents { height: calc(30*1%); } .height-35 { height: 35vw; } .height-35-pixels { height: 35px; } .height-35-percents { height: calc(35*1%); } .height-40 { height: 40vw; } .height-40-pixels { height: 40px; } .height-40-percents { height: calc(40*1%); } .height-45 { height: 45vw; } .height-45-pixels { height: 45px; } .height-45-percents { height: calc(45*1%); } .height-50 { height: 50vw; } .height-50-pixels { height: 50px; } .height-50-percents { height: calc(50*1%); } .height-55 { height: 55vw; } .height-55-pixels { height: 55px; } .height-55-percents { height: calc(55*1%); } .height-60 { height: 60vw; } .height-60-pixels { height: 60px; } .height-60-percents { height: calc(60*1%); } .height-65 { height: 65vw; } .height-65-pixels { height: 65px; } .height-65-percents { height: calc(65*1%); } .height-70 { height: 70vw; } .height-70-pixels { height: 70px; } .height-70-percents { height: calc(70*1%); } .height-75 { height: 75vw; } .height-75-pixels { height: 75px; } .height-75-percents { height: calc(75*1%); } .height-80 { height: 80vw; } .height-80-pixels { height: 80px; } .height-80-percents { height: calc(80*1%); } .height-85 { height: 85vw; } .height-85-pixels { height: 85px; } .height-85-percents { height: calc(85*1%); } .height-90 { height: 90vw; } .height-90-pixels { height: 90px; } .height-90-percents { height: calc(90*1%); } .height-95 { height: 95vw; } .height-95-pixels { height: 95px; } .height-95-percents { height: calc(95*1%); } .height-100 { height: 100vw; } .height-100-pixels { height: 100px; } .height-100-percents { height: calc(100*1%); } .height-200 { height: 200vw; } .height-200-pixels { height: 200px; } .height-200-percents { height: calc(200*1%); } .height-300 { height: 300vw; } .height-300-pixels { height: 300px; } .height-300-percents { height: calc(300*1%); } .height-400 { height: 400vw; } .height-400-pixels { height: 400px; } .height-400-percents { height: calc(400*1%); } .height-500 { height: 500vw; } .height-500-pixels { height: 500px; } .height-500-percents { height: calc(500*1%); } .height-600 { height: 600vw; } .height-600-pixels { height: 600px; } .height-600-percents { height: calc(600*1%); } .height-700 { height: 700vw; } .height-700-pixels { height: 700px; } .height-700-percents { height: calc(700*1%); } .height-800 { height: 800vw; } .height-800-pixels { height: 800px; } .height-800-percents { height: calc(800*1%); } .height-900 { height: 900vw; } .height-900-pixels { height: 900px; } .height-900-percents { height: calc(900*1%); } .height-1000 { height: 1000vw; } .height-1000-pixels { height: 1000px; } .height-1000-percents { height: calc(1000*1%); } .height-max-content { height: -moz-max-content; height: max-content; } .gap-1 { gap: 1vw; } .gap-1-pixels { gap: 1px; } .gap-1-percents { gap: calc(1*1%); } .gap-5 { gap: 5vw; } .gap-5-pixels { gap: 5px; } .gap-5-percents { gap: calc(5*1%); } .gap-10 { gap: 10vw; } .gap-10-pixels { gap: 10px; } .gap-10-percents { gap: calc(10*1%); } .gap-15 { gap: 15vw; } .gap-15-pixels { gap: 15px; } .gap-15-percents { gap: calc(15*1%); } .gap-20 { gap: 20vw; } .gap-20-pixels { gap: 20px; } .gap-20-percents { gap: calc(20*1%); } .gap-25 { gap: 25vw; } .gap-25-pixels { gap: 25px; } .gap-25-percents { gap: calc(25*1%); } .gap-30 { gap: 30vw; } .gap-30-pixels { gap: 30px; } .gap-30-percents { gap: calc(30*1%); } .gap-35 { gap: 35vw; } .gap-35-pixels { gap: 35px; } .gap-35-percents { gap: calc(35*1%); } .gap-40 { gap: 40vw; } .gap-40-pixels { gap: 40px; } .gap-40-percents { gap: calc(40*1%); } .gap-45 { gap: 45vw; } .gap-45-pixels { gap: 45px; } .gap-45-percents { gap: calc(45*1%); } .gap-50 { gap: 50vw; } .gap-50-pixels { gap: 50px; } .gap-50-percents { gap: calc(50*1%); } .gap-55 { gap: 55vw; } .gap-55-pixels { gap: 55px; } .gap-55-percents { gap: calc(55*1%); } .gap-60 { gap: 60vw; } .gap-60-pixels { gap: 60px; } .gap-60-percents { gap: calc(60*1%); } .gap-65 { gap: 65vw; } .gap-65-pixels { gap: 65px; } .gap-65-percents { gap: calc(65*1%); } .gap-70 { gap: 70vw; } .gap-70-pixels { gap: 70px; } .gap-70-percents { gap: calc(70*1%); } .gap-75 { gap: 75vw; } .gap-75-pixels { gap: 75px; } .gap-75-percents { gap: calc(75*1%); } .gap-80 { gap: 80vw; } .gap-80-pixels { gap: 80px; } .gap-80-percents { gap: calc(80*1%); } .gap-85 { gap: 85vw; } .gap-85-pixels { gap: 85px; } .gap-85-percents { gap: calc(85*1%); } .gap-90 { gap: 90vw; } .gap-90-pixels { gap: 90px; } .gap-90-percents { gap: calc(90*1%); } .gap-95 { gap: 95vw; } .gap-95-pixels { gap: 95px; } .gap-95-percents { gap: calc(95*1%); } .gap-100 { gap: 100vw; } .gap-100-pixels { gap: 100px; } .gap-100-percents { gap: calc(100*1%); } .gap-200 { gap: 200vw; } .gap-200-pixels { gap: 200px; } .gap-200-percents { gap: calc(200*1%); } .gap-300 { gap: 300vw; } .gap-300-pixels { gap: 300px; } .gap-300-percents { gap: calc(300*1%); } .gap-400 { gap: 400vw; } .gap-400-pixels { gap: 400px; } .gap-400-percents { gap: calc(400*1%); } .gap-500 { gap: 500vw; } .gap-500-pixels { gap: 500px; } .gap-500-percents { gap: calc(500*1%); } .gap-600 { gap: 600vw; } .gap-600-pixels { gap: 600px; } .gap-600-percents { gap: calc(600*1%); } .gap-700 { gap: 700vw; } .gap-700-pixels { gap: 700px; } .gap-700-percents { gap: calc(700*1%); } .gap-800 { gap: 800vw; } .gap-800-pixels { gap: 800px; } .gap-800-percents { gap: calc(800*1%); } .gap-900 { gap: 900vw; } .gap-900-pixels { gap: 900px; } .gap-900-percents { gap: calc(900*1%); } .gap-1000 { gap: 1000vw; } .gap-1000-pixels { gap: 1000px; } .gap-1000-percents { gap: calc(1000*1%); } /* * Skeleton V2.0.4 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 12/29/2014 */ /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– - Flex - Roundings - Dropdown - Margins - navbar + Footer - Borders - Grid - Base Styles - Typography - Links - Buttons - Forms - Lists - Elevation - Notifications - Code - Tables - Spacing - Utilities - Clearing - Media Queries */ /* Flex –––––––––––––––––––––––––––––––––––––––––––––––––– */ .flex { display: flex; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-column { flex-direction: column; } .flex-column-reverse { flex-direction: column-reverse; } .flex.wrap { flex-wrap: wrap; } .flex.wrap-reverse { flex-wrap: wrap-reverse; } .flex.nowrap { flex-wrap: nowrap; } /* Roundings –––––––––––––––––––––––––––––––––––––––––––––––––– */ .rounded-md { border-radius: 4px; } .rounded-lg { border-radius: 8px; } .rounded-xl { border-radius: 16px; } .rounded-xxl { border-radius: 24px; } .rounded-3xl { border-radius: 32px; } .rounded-4xl { border-radius: 40px; } .rounded-5xl { border-radius: 48px; } .rounded-6xl { border-radius: 64px; } .rounded-7xl { border-radius: 80px; } .rounded-8xl { border-radius: 96px; } .rounded-full { border-radius: 100vw; } .rounded-full-percents { border-radius: 100%; } .rounded-full-pixels { border-radius: 9999px; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-even { justify-content: space-evenly; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; } .content-baseline { align-content: baseline; } .content-center { align-content: center; } .content-end { align-content: flex-end; } .content-start { align-content: flex-start; } .content-around { align-content: space-around; } .content-between { align-content: space-between; } .vertical-middle { vertical-align: middle; } /* Display Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .grid { display: grid; } .grid-cols { grid-template-columns: 1fr; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-2-percents { grid-template-columns: repeat(2, 50%); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-3-percents { grid-template-columns: repeat(3, 33.33333%); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .grid-cols-4-percents { grid-template-columns: repeat(4, 25%); } .grid-cols-5 { grid-template-columns: repeat(5, 1fr); } .grid-cols-5-percents { grid-template-columns: repeat(5, 20%); } .grid-cols-6 { grid-template-columns: repeat(6, 1fr); } .grid-cols-6-percents { grid-template-columns: repeat(6, 16.66667%); } .grid-cols-7 { grid-template-columns: repeat(7, 1fr); } .grid-cols-7-percents { grid-template-columns: repeat(7, 14.28571%); } .grid-cols-8 { grid-template-columns: repeat(8, 1fr); } .grid-cols-8-percents { grid-template-columns: repeat(8, 12.5%); } .grid-cols-9 { grid-template-columns: repeat(9, 1fr); } .grid-cols-9-percents { grid-template-columns: repeat(9, 11.11111%); } .grid-cols-10 { grid-template-columns: repeat(10, 1fr); } .grid-cols-10-percents { grid-template-columns: repeat(10, 10%); } .grid-cols-11 { grid-template-columns: repeat(11, 1fr); } .grid-cols-11-percents { grid-template-columns: repeat(11, 9.09091%); } .grid-cols-12 { grid-template-columns: repeat(12, 1fr); } .grid-cols-12-percents { grid-template-columns: repeat(12, 8.33333%); } .grid-rows { grid-template-rows: 1fr; } .grid-rows-2 { grid-template-rows: repeat(2, 1fr); } .grid-rows-2-percents { grid-template-rows: repeat(2, 50%); } .grid-rows-3 { grid-template-rows: repeat(3, 1fr); } .grid-rows-3-percents { grid-template-rows: repeat(3, 33.33333%); } .grid-rows-4 { grid-template-rows: repeat(4, 1fr); } .grid-rows-4-percents { grid-template-rows: repeat(4, 25%); } .grid-rows-5 { grid-template-rows: repeat(5, 1fr); } .grid-rows-5-percents { grid-template-rows: repeat(5, 20%); } .grid-rows-6 { grid-template-rows: repeat(6, 1fr); } .grid-rows-6-percents { grid-template-rows: repeat(6, 16.66667%); } .grid-rows-7 { grid-template-rows: repeat(7, 1fr); } .grid-rows-7-percents { grid-template-rows: repeat(7, 14.28571%); } .grid-rows-8 { grid-template-rows: repeat(8, 1fr); } .grid-rows-8-percents { grid-template-rows: repeat(8, 12.5%); } .grid-rows-9 { grid-template-rows: repeat(9, 1fr); } .grid-rows-9-percents { grid-template-rows: repeat(9, 11.11111%); } .grid-rows-10 { grid-template-rows: repeat(10, 1fr); } .grid-rows-10-percents { grid-template-rows: repeat(10, 10%); } .grid-rows-11 { grid-template-rows: repeat(11, 1fr); } .grid-rows-11-percents { grid-template-rows: repeat(11, 9.09091%); } .grid-rows-12 { grid-template-rows: repeat(12, 1fr); } .grid-rows-12-percents { grid-template-rows: repeat(12, 8.33333%); } .place-center { place-content: center; } .place-end { place-content: flex-end; } .place-start { place-content: flex-start; } /* Dropdown –––––––––––––––––––––––––––––––––––––––––––––––––– */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } /* Margins –––––––––––––––––––––––––––––––––––––––––––––––––– */ .m { margin: auto; } .mt { margin-top: auto; } .mt-0 { margin-top: 0vh; } .mt-0-pixels { margin-top: 0px; } .mt-0-percents { margin-top: 0%; } .mt-10 { margin-top: 10vh; } .mt-10-pixels { margin-top: 10px; } .mt-10-percents { margin-top: 10%; } .mt-20 { margin-top: 20vh; } .mt-20-pixels { margin-top: 20px; } .mt-20-percents { margin-top: 20%; } .mt-30 { margin-top: 30vh; } .mt-30-pixels { margin-top: 30px; } .mt-30-percents { margin-top: 30%; } .mt-40 { margin-top: 40vh; } .mt-40-pixels { margin-top: 40px; } .mt-40-percents { margin-top: 40%; } .mt-50 { margin-top: 50vh; } .mt-50-pixels { margin-top: 50px; } .mt-50-percents { margin-top: 50%; } .mt-60 { margin-top: 60vh; } .mt-60-pixels { margin-top: 60px; } .mt-60-percents { margin-top: 60%; } .mt-70 { margin-top: 70vh; } .mt-70-pixels { margin-top: 70px; } .mt-70-percents { margin-top: 70%; } .mt-80 { margin-top: 80vh; } .mt-80-pixels { margin-top: 80px; } .mt-80-percents { margin-top: 80%; } .mt-90 { margin-top: 90vh; } .mt-90-pixels { margin-top: 90px; } .mt-90-percents { margin-top: 90%; } .mt-100 { margin-top: 100vh; } .mt-100-pixels { margin-top: 100px; } .mt-100-percents { margin-top: 100%; } .mb { margin-bottom: auto; } .mb-0 { margin-bottom: 0vh; } .mb-0-pixels { margin-bottom: 0px; } .mb-0-percents { margin-bottom: 0%; } .mb-10 { margin-bottom: 10vh; } .mb-10-pixels { margin-bottom: 10px; } .mb-10-percents { margin-bottom: 10%; } .mb-20 { margin-bottom: 20vh; } .mb-20-pixels { margin-bottom: 20px; } .mb-20-percents { margin-bottom: 20%; } .mb-30 { margin-bottom: 30vh; } .mb-30-pixels { margin-bottom: 30px; } .mb-30-percents { margin-bottom: 30%; } .mb-40 { margin-bottom: 40vh; } .mb-40-pixels { margin-bottom: 40px; } .mb-40-percents { margin-bottom: 40%; } .mb-50 { margin-bottom: 50vh; } .mb-50-pixels { margin-bottom: 50px; } .mb-50-percents { margin-bottom: 50%; } .mb-60 { margin-bottom: 60vh; } .mb-60-pixels { margin-bottom: 60px; } .mb-60-percents { margin-bottom: 60%; } .mb-70 { margin-bottom: 70vh; } .mb-70-pixels { margin-bottom: 70px; } .mb-70-percents { margin-bottom: 70%; } .mb-80 { margin-bottom: 80vh; } .mb-80-pixels { margin-bottom: 80px; } .mb-80-percents { margin-bottom: 80%; } .mb-90 { margin-bottom: 90vh; } .mb-90-pixels { margin-bottom: 90px; } .mb-90-percents { margin-bottom: 90%; } .mb-100 { margin-bottom: 100vh; } .mb-100-pixels { margin-bottom: 100px; } .mb-100-percents { margin-bottom: 100%; } .ml { margin-left: auto; } .ml-0 { margin-left: 0vw; } .ml-0-pixels { margin-left: 0px; } .ml-0-percents { margin-left: 0%; } .ml-10 { margin-left: 10vw; } .ml-10-pixels { margin-left: 10px; } .ml-10-percents { margin-left: 10%; } .ml-20 { margin-left: 20vw; } .ml-20-pixels { margin-left: 20px; } .ml-20-percents { margin-left: 20%; } .ml-30 { margin-left: 30vw; } .ml-30-pixels { margin-left: 30px; } .ml-30-percents { margin-left: 30%; } .ml-40 { margin-left: 40vw; } .ml-40-pixels { margin-left: 40px; } .ml-40-percents { margin-left: 40%; } .ml-50 { margin-left: 50vw; } .ml-50-pixels { margin-left: 50px; } .ml-50-percents { margin-left: 50%; } .ml-60 { margin-left: 60vw; } .ml-60-pixels { margin-left: 60px; } .ml-60-percents { margin-left: 60%; } .ml-70 { margin-left: 70vw; } .ml-70-pixels { margin-left: 70px; } .ml-70-percents { margin-left: 70%; } .ml-80 { margin-left: 80vw; } .ml-80-pixels { margin-left: 80px; } .ml-80-percents { margin-left: 80%; } .ml-90 { margin-left: 90vw; } .ml-90-pixels { margin-left: 90px; } .ml-90-percents { margin-left: 90%; } .ml-100 { margin-left: 100vw; } .ml-100-pixels { margin-left: 100px; } .ml-100-percents { margin-left: 100%; } .mr { margin-right: auto; } .mr-0 { margin-right: 0vw; } .mr-0-pixels { margin-right: 0px; } .mr-0-percents { margin-right: 0%; } .mr-10 { margin-right: 10vw; } .mr-10-pixels { margin-right: 10px; } .mr-10-percents { margin-right: 10%; } .mr-20 { margin-right: 20vw; } .mr-20-pixels { margin-right: 20px; } .mr-20-percents { margin-right: 20%; } .mr-30 { margin-right: 30vw; } .mr-30-pixels { margin-right: 30px; } .mr-30-percents { margin-right: 30%; } .mr-40 { margin-right: 40vw; } .mr-40-pixels { margin-right: 40px; } .mr-40-percents { margin-right: 40%; } .mr-50 { margin-right: 50vw; } .mr-50-pixels { margin-right: 50px; } .mr-50-percents { margin-right: 50%; } .mr-60 { margin-right: 60vw; } .mr-60-pixels { margin-right: 60px; } .mr-60-percents { margin-right: 60%; } .mr-70 { margin-right: 70vw; } .mr-70-pixels { margin-right: 70px; } .mr-70-percents { margin-right: 70%; } .mr-80 { margin-right: 80vw; } .mr-80-pixels { margin-right: 80px; } .mr-80-percents { margin-right: 80%; } .mr-90 { margin-right: 90vw; } .mr-90-pixels { margin-right: 90px; } .mr-90-percents { margin-right: 90%; } .mr-100 { margin-right: 100vw; } .mr-100-pixels { margin-right: 100px; } .mr-100-percents { margin-right: 100%; } /* Paddings –––––––––––––––––––––––––––––––––––––––––––––––––– */ .p-auto { padding: auto; } .p-0 { padding: 0px; } .p-0-vw { padding: 0vw; } .p-0-vh { padding: 0vh; } .p-0-percents { padding: 0%; } .p-10 { padding: 10px; } .p-10-vw { padding: 10vw; } .p-10-vh { padding: 10vh; } .p-10-percents { padding: 10%; } .p-20 { padding: 20px; } .p-20-vw { padding: 20vw; } .p-20-vh { padding: 20vh; } .p-20-percents { padding: 20%; } .p-30 { padding: 30px; } .p-30-vw { padding: 30vw; } .p-30-vh { padding: 30vh; } .p-30-percents { padding: 30%; } .p-40 { padding: 40px; } .p-40-vw { padding: 40vw; } .p-40-vh { padding: 40vh; } .p-40-percents { padding: 40%; } .p-50 { padding: 50px; } .p-50-vw { padding: 50vw; } .p-50-vh { padding: 50vh; } .p-50-percents { padding: 50%; } .p-60 { padding: 60px; } .p-60-vw { padding: 60vw; } .p-60-vh { padding: 60vh; } .p-60-percents { padding: 60%; } .p-70 { padding: 70px; } .p-70-vw { padding: 70vw; } .p-70-vh { padding: 70vh; } .p-70-percents { padding: 70%; } .p-80 { padding: 80px; } .p-80-vw { padding: 80vw; } .p-80-vh { padding: 80vh; } .p-80-percents { padding: 80%; } .p-90 { padding: 90px; } .p-90-vw { padding: 90vw; } .p-90-vh { padding: 90vh; } .p-90-percents { padding: 90%; } .p-100 { padding: 100px; } .p-100-vw { padding: 100vw; } .p-100-vh { padding: 100vh; } .p-100-percents { padding: 100%; } .pt { padding-top: auto; } .pt-0 { padding-top: 0vh; } .pt-0-pixels { padding-top: 0px; } .pt-0-percents { padding-top: 0%; } .pt-10 { padding-top: 10vh; } .pt-10-pixels { padding-top: 10px; } .pt-10-percents { padding-top: 10%; } .pt-20 { padding-top: 20vh; } .pt-20-pixels { padding-top: 20px; } .pt-20-percents { padding-top: 20%; } .pt-30 { padding-top: 30vh; } .pt-30-pixels { padding-top: 30px; } .pt-30-percents { padding-top: 30%; } .pt-40 { padding-top: 40vh; } .pt-40-pixels { padding-top: 40px; } .pt-40-percents { padding-top: 40%; } .pt-50 { padding-top: 50vh; } .pt-50-pixels { padding-top: 50px; } .pt-50-percents { padding-top: 50%; } .pt-60 { padding-top: 60vh; } .pt-60-pixels { padding-top: 60px; } .pt-60-percents { padding-top: 60%; } .pt-70 { padding-top: 70vh; } .pt-70-pixels { padding-top: 70px; } .pt-70-percents { padding-top: 70%; } .pt-80 { padding-top: 80vh; } .pt-80-pixels { padding-top: 80px; } .pt-80-percents { padding-top: 80%; } .pt-90 { padding-top: 90vh; } .pt-90-pixels { padding-top: 90px; } .pt-90-percents { padding-top: 90%; } .pt-100 { padding-top: 100vh; } .pt-100-pixels { padding-top: 100px; } .pt-100-percents { padding-top: 100%; } .pb { padding-bottom: auto; } .pb-0 { padding-bottom: 0vh; } .pb-0-pixels { padding-bottom: 0px; } .pb-0-percents { padding-bottom: 0%; } .pb-10 { padding-bottom: 10vh; } .pb-10-pixels { padding-bottom: 10px; } .pb-10-percents { padding-bottom: 10%; } .pb-20 { padding-bottom: 20vh; } .pb-20-pixels { padding-bottom: 20px; } .pb-20-percents { padding-bottom: 20%; } .pb-30 { padding-bottom: 30vh; } .pb-30-pixels { padding-bottom: 30px; } .pb-30-percents { padding-bottom: 30%; } .pb-40 { padding-bottom: 40vh; } .pb-40-pixels { padding-bottom: 40px; } .pb-40-percents { padding-bottom: 40%; } .pb-50 { padding-bottom: 50vh; } .pb-50-pixels { padding-bottom: 50px; } .pb-50-percents { padding-bottom: 50%; } .pb-60 { padding-bottom: 60vh; } .pb-60-pixels { padding-bottom: 60px; } .pb-60-percents { padding-bottom: 60%; } .pb-70 { padding-bottom: 70vh; } .pb-70-pixels { padding-bottom: 70px; } .pb-70-percents { padding-bottom: 70%; } .pb-80 { padding-bottom: 80vh; } .pb-80-pixels { padding-bottom: 80px; } .pb-80-percents { padding-bottom: 80%; } .pb-90 { padding-bottom: 90vh; } .pb-90-pixels { padding-bottom: 90px; } .pb-90-percents { padding-bottom: 90%; } .pb-100 { padding-bottom: 100vh; } .pb-100-pixels { padding-bottom: 100px; } .pb-100-percents { padding-bottom: 100%; } .pl { padding-left: auto; } .pl-0 { padding-left: 0vw; } .pl-0-pixels { padding-left: 0px; } .pl-0-percents { padding-left: 0%; } .pl-10 { padding-left: 10vw; } .pl-10-pixels { padding-left: 10px; } .pl-10-percents { padding-left: 10%; } .pl-20 { padding-left: 20vw; } .pl-20-pixels { padding-left: 20px; } .pl-20-percents { padding-left: 20%; } .pl-30 { padding-left: 30vw; } .pl-30-pixels { padding-left: 30px; } .pl-30-percents { padding-left: 30%; } .pl-40 { padding-left: 40vw; } .pl-40-pixels { padding-left: 40px; } .pl-40-percents { padding-left: 40%; } .pl-50 { padding-left: 50vw; } .pl-50-pixels { padding-left: 50px; } .pl-50-percents { padding-left: 50%; } .pl-60 { padding-left: 60vw; } .pl-60-pixels { padding-left: 60px; } .pl-60-percents { padding-left: 60%; } .pl-70 { padding-left: 70vw; } .pl-70-pixels { padding-left: 70px; } .pl-70-percents { padding-left: 70%; } .pl-80 { padding-left: 80vw; } .pl-80-pixels { padding-left: 80px; } .pl-80-percents { padding-left: 80%; } .pl-90 { padding-left: 90vw; } .pl-90-pixels { padding-left: 90px; } .pl-90-percents { padding-left: 90%; } .pl-100 { padding-left: 100vw; } .pl-100-pixels { padding-left: 100px; } .pl-100-percents { padding-left: 100%; } .pr { padding-right: auto; } .pr-0 { padding-right: 0vw; } .pr-0-pixels { padding-right: 0px; } .pr-0-percents { padding-right: 0%; } .pr-10 { padding-right: 10vw; } .pr-10-pixels { padding-right: 10px; } .pr-10-percents { padding-right: 10%; } .pr-20 { padding-right: 20vw; } .pr-20-pixels { padding-right: 20px; } .pr-20-percents { padding-right: 20%; } .pr-30 { padding-right: 30vw; } .pr-30-pixels { padding-right: 30px; } .pr-30-percents { padding-right: 30%; } .pr-40 { padding-right: 40vw; } .pr-40-pixels { padding-right: 40px; } .pr-40-percents { padding-right: 40%; } .pr-50 { padding-right: 50vw; } .pr-50-pixels { padding-right: 50px; } .pr-50-percents { padding-right: 50%; } .pr-60 { padding-right: 60vw; } .pr-60-pixels { padding-right: 60px; } .pr-60-percents { padding-right: 60%; } .pr-70 { padding-right: 70vw; } .pr-70-pixels { padding-right: 70px; } .pr-70-percents { padding-right: 70%; } .pr-80 { padding-right: 80vw; } .pr-80-pixels { padding-right: 80px; } .pr-80-percents { padding-right: 80%; } .pr-90 { padding-right: 90vw; } .pr-90-pixels { padding-right: 90px; } .pr-90-percents { padding-right: 90%; } .pr-100 { padding-right: 100vw; } .pr-100-pixels { padding-right: 100px; } .pr-100-percents { padding-right: 100%; } /* Custom colors –––––––––––––––––––––––––––––––––––––––––––––––––– */ .color-white { color: white; } .color-black { color: black; } .hover-white:hover { color: white; } .hover-black:hover { color: black; } .hover-decoration-underline:hover { text-decoration: underline; } .background-cover { background-size: cover; } .background-contain { background-size: contain; } .background-no-repeat { background-repeat: no-repeat; } .background-repeat { background-repeat: repeat; } .background-repeat-x { background-repeat: repeat-x; } .background-repeat-y { background-repeat: repeat-y; } .background-repeat-round { background-repeat: round; } .background-repeat-space { background-repeat: space; } .background-beige { background-color: #EFECCC; } .background-green { background-color: #70D66A; } .background-black { background-color: #0a0a0a; } .background-white { background-color: #fafafa; } .background-red { background-color: #E55151; } .background-blue { background-color: #3F6FE8; } .background-purple { background-color: #9843C0; } .background-yellow { background-color: #ECEA63; } .background-brown { background-color: #956C5F; } .background-pink { background-color: #E282DF; } .background-grey { background-color: #8E7F8D; } .color[color-data] { color: attr(color-data color); } .hover[hover-color-data]:hover { color: attr(hover-color-data color); } .background[background-color-data] { background-color: attr(background-color-data color); } /* Navbar + Footer –––––––––––––––––––––––––––––––––––––––––––––––––– */ .navbar, .footer { right: 0; left: 0; width: 100%; height: 10vh; z-index: 30; position: sticky; } .navbar-light, .footer-light { background-color: azure; } .navbar-dark, .footer-dark { background-color: #333333; } .navbar { top: 0; } .footer { bottom: 0; } .nav-link { margin-left: 3%; } .nav-link.selected { font-weight: 700; } ul.style-type-none { list-style-type: none; } .decoration-none { text-decoration: none; } .decoration-underline { text-decoration: underline; } .decoration-line-through { text-decoration: line-through; } .decoration-overline { text-decoration: overline; } .decoration-underline-overline { text-decoration: underline overline; } /* Text Size –––––––––––––––––––––––––––––––––––––––––––––––––– */ .text-xxs { font-size: 0.75rem; } .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-md { font-size: 1rem; } .text-lg { font-size: 1.25rem; } .text-xl { font-size: 1.5rem; } .text-xxl { font-size: 1.75rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .text-5xl { font-size: 3rem; } .text-6xl { font-size: 4rem; } .text-7xl { font-size: 5rem; } .text-8xl { font-size: 6rem; } .text-9xl { font-size: 7rem; } /* Font Weights –––––––––––––––––––––––––––––––––––––––––––––––––– */ .font-light { font-weight: 300; } .font-regular { font-weight: 400; } .font-medium { font-weight: 500; } .font-semi-bold { font-weight: 600; } .font-bold { font-weight: 700; } .font-extra-bold { font-weight: 900; } /* Borders –––––––––––––––––––––––––––––––––––––––––––––––––– */ .border-solid-1 { border: 1px solid; } .border-solid-2 { border: 2px solid; } .border-solid-3 { border: 3px solid; } .border-solid-4 { border: 4px solid; } .border-solid-5 { border: 5px solid; } .border-solid-6 { border: 6px solid; } .border-solid-7 { border: 7px solid; } .border-solid-8 { border: 8px solid; } .border-solid-9 { border: 9px solid; } .border-solid-10 { border: 10px solid; } .border-dotted { border-style: dotted; } .border-dashed { border-style: dashed; } .border-none { border: none; } .border-color-beige { border-color: #EFECCC; } .border-color-green { border-color: #70D66A; } .border-color-black { border-color: #0a0a0a; } .border-color-white { border-color: #fafafa; } .border-color-red { border-color: #E55151; } .border-color-blue { border-color: #3F6FE8; } .border-color-purple { border-color: #9843C0; } .border-color-yellow { border-color: #ECEA63; } .border-color-brown { border-color: #956C5F; } .border-color-pink { border-color: #E282DF; } .border-color-grey { border-color: #8E7F8D; } .border-color[border-color-data] { border-color: attr(border-color-data color); } .radius-5 { border-radius: 5px; } .radius-10 { border-radius: 10px; } .radius-15 { border-radius: 15px; } .radius-20 { border-radius: 20px; } .radius-25 { border-radius: 25px; } .radius-30 { border-radius: 30px; } .radius-35 { border-radius: 35px; } .radius-full { border-radius: 100%; } /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } @media (min-width: 400px) { .container { width: 85%; padding: 0; } } .column, .columns { width: 100%; float: left; box-sizing: border-box; } /* For devices larger than 550px */ @media (min-width: 550px) { .container { width: 80%; } .column:first-child, .columns:first-child { margin-left: 0; } .one.column, .one.columns { width: 4.66666666667%; } .two.columns { width: 13.3333333333%; } .three.columns { width: 22%; } .four.columns { width: 30.6666666667%; } .five.columns { width: 39.3333333333%; } .six.columns { width: 48%; } .seven.columns { width: 56.6666666667%; } .eight.columns { width: 65.3333333333%; } .nine.columns { width: 74.0%; } .ten.columns { width: 82.6666666667%; } .eleven.columns { width: 91.3333333333%; } .twelve.columns { width: 100%; margin-left: 0; } .one-third.column { width: 30.6666666667%; } .two-thirds.column { width: 65.3333333333%; } .one-half.column { width: 48%; } /* Offsets */ .offset-by-one-half.column, .offset-by-one-half.columns { margin-left: 52%; } .offset-by-one-third.column, .offset-by-one-third.columns { margin-left: 34.6666666667%; } .offset-by-one.column, .offset-by-one.columns { margin-left: 8.66666666667%; } .offset-by-two-thirds.column, .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } .offset-by-two.column, .offset-by-two.columns { margin-left: 17.3333333333%; } .offset-by-three.column, .offset-by-three.columns { margin-left: 26%; } .offset-by-four.column, .offset-by-four.columns { margin-left: 34.6666666667%; } .offset-by-five.column, .offset-by-five.columns { margin-left: 43.3333333333%; } .offset-by-six.column, .offset-by-six.columns { margin-left: 52%; } .offset-by-seven.column, .offset-by-seven.columns { margin-left: 60.6666666667%; } .offset-by-eight.column, .offset-by-eight.columns { margin-left: 69.3333333333%; } .offset-by-nine.column, .offset-by-nine.columns { margin-left: 78.0%; } .offset-by-ten.column, .offset-by-ten.columns { margin-left: 86.6666666667%; } .offset-by-eleven.column, .offset-by-eleven.columns { margin-left: 95.3333333333%; } } /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html { font-size: 62.5%; } body { font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1 { margin: 0; margin-bottom: 2rem; font-weight: 300; font-size: 4rem; line-height: 1.2; letter-spacing: -0.1rem; } h2 { margin: 0; margin-bottom: 2rem; font-weight: 300; font-size: 3.6rem; line-height: 1.25; letter-spacing: -0.1rem; } h3 { margin: 0; margin-bottom: 2rem; font-weight: 300; font-size: 3rem; line-height: 1.3; letter-spacing: -0.1rem; } h4 { margin: 0; margin-bottom: 2rem; font-weight: 300; font-size: 2.4rem; line-height: 1.35; letter-spacing: -0.08rem; } h5 { margin: 0; margin-bottom: 2rem; font-weight: 300; font-size: 1.8rem; line-height: 1.5; letter-spacing: -0.05rem; } h6 { margin: 0; margin-bottom: 2rem; font-weight: 300; font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } /* Larger than phablet */ @media (min-width: 550px) { h1 { font-size: 5.0rem; } h2 { font-size: 4.2rem; } h3 { font-size: 3.6rem; } h4 { font-size: 3.0rem; } h5 { font-size: 2.4rem; } h6 { font-size: 1.5rem; } } p { margin-top: 0; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { color: #1EAEDB; } a:hover { color: #0FA0CE; } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: 38px; padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #888; outline: 0; } .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; border-color: #33C3F0; } .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; } .button.button-secondary, button.button-secondary, input[type="submit"].button-secondary, input[type="reset"].button-secondary, input[type="button"].button-secondary { color: #FFF; background-color: #6c757d; border-color: #6c757d; } .button.button-secondary:hover, button.button-secondary:hover, input[type="submit"].button-secondary:hover, input[type="reset"].button-secondary:hover, input[type="button"].button-secondary:hover, .button.button-secondary:focus, button.button-secondary:focus, input[type="submit"].button-secondary:focus, input[type="reset"].button-secondary:focus, input[type="button"].button-secondary:focus { color: #FFF; background-color: #555555; border-color: #555555; } .button.button-success, button.button-success, input[type="submit"].button-success, input[type="reset"].button-success, input[type="button"].button-success { color: #FFF; background-color: #28A745; border-color: #28A745; } .button.button-success:hover, button.button-success:hover, input[type="submit"].button-success:hover, input[type="reset"].button-success:hover, input[type="button"].button-success:hover, .button.button-success:focus, button.button-success:focus, input[type="submit"].button-success:focus, input[type="reset"].button-success:focus, input[type="button"].button-success:focus { color: #FFF; background-color: #1D8F38; border-color: #1D8F38; } .button.button-danger, button.button-danger, input[type="submit"].button-danger, input[type="reset"].button-danger, input[type="button"].button-danger { color: #FFF; background-color: #DC3545; border-color: #DC3545; } .button.button-danger:hover, button.button-danger:hover, input[type="submit"].button-danger:hover, input[type="reset"].button-danger:hover, input[type="button"].button-danger:hover, .button.button-danger:focus, button.button-danger:focus, input[type="submit"].button-danger:focus, input[type="reset"].button-danger:focus, input[type="button"].button-danger:focus { color: #FFF; background-color: #CF2435; border-color: #CF2435; } .button.button-warning, button.button-warning, input[type="submit"].button-warning, input[type="reset"].button-warning, input[type="button"].button-warning { color: #FFF; background-color: #FFC107; border-color: #FFC107; } .button.button-warning:hover, button.button-warning:hover, input[type="submit"].button-warning:hover, input[type="reset"].button-warning:hover, input[type="button"].button-warning:hover, .button.button-warning:focus, button.button-warning:focus, input[type="submit"].button-warning:focus, input[type="reset"].button-warning:focus, input[type="button"].button-warning:focus { color: #FFF; background-color: #D8A50D; border-color: #D8A50D; } .button.button-info, button.button-info, input[type="submit"].button-info, input[type="reset"].button-info, input[type="button"].button-info { color: #FFF; background-color: #17A2B8; border-color: #17A2B8; } .button.button-info:hover, button.button-info:hover, input[type="submit"].button-info:hover, input[type="reset"].button-info:hover, input[type="button"].button-info:hover, .button.button-info:focus, button.button-info:focus, input[type="submit"].button-info:focus, input[type="reset"].button-info:focus, input[type="button"].button-info:focus { color: #FFF; background-color: #138C9E; border-color: #138C9E; } .button.button-dark, button.button-dark, input[type="submit"].button-dark, input[type="reset"].button-dark, input[type="button"].button-dark { color: #FFF; background-color: #343A40; border-color: #343A40; } .button.button-dark:hover, button.button-dark:hover, input[type="submit"].button-dark:hover, input[type="reset"].button-dark:hover, input[type="button"].button-dark:hover, .button.button-dark:focus, button.button-dark:focus, input[type="submit"].button-dark:focus, input[type="reset"].button-dark:focus, input[type="button"].button-dark:focus { color: #FFF; background-color: #262A2E; border-color: #262A2E; } /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; } /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; outline: 0; } label, legend { display: block; margin-bottom: .5rem; font-weight: 600; } fieldset { padding: 0; border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; } /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ ul { list-style: circle inside; } ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; } ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } li { margin-bottom: 1rem; } /* Elevation –––––––––––––––––––––––––––––––––––––––––––––––––– */ .elevation-1 { box-shadow: -10px 1px 1px #00000055; } .elevation-2 { box-shadow: -10px 2px 2px #00000055; } .elevation-3 { box-shadow: -10px 3px 3px #00000055; } .elevation-4 { box-shadow: -10px 4px 4px #00000055; } .elevation-5 { box-shadow: -10px 5px 5px #00000055; } .elevation-6 { box-shadow: -10px 6px 6px #00000055; } .elevation-7 { box-shadow: -10px 7px 7px #00000055; } .elevation-8 { box-shadow: -10px 8px 8px #00000055; } .elevation-9 { box-shadow: -10px 9px 9px #00000055; } .elevation-10 { box-shadow: -10px 10px 10px #00000055; } /* Notifications –––––––––––––––––––––––––––––––––––––––––––––––––– */ .notification { position: absolute; top: 10px; right: 10px; border: #0a0a0a solid 1px; display: none; width: 20%; height: 5%; transition: display 1s ease-out; border-radius: 10px; background-color: #F9F7F7; box-shadow: -10px 5px 5px #00000055; } .notify { display: flex; justify-content: center; align-items: center; } .notification-wrong { background-color: #F9D7D788; border-color: #F9D7D7; } .notification-great { background-color: #DFF0D888; border-color: #DFF0D8; } .notification-great > .notification-content { color: #34442d; } .notification-wrong > .notification-content { color: #4b1c1c; } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; } pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; } /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { margin-bottom: 1rem; } input, textarea, select, fieldset { margin-bottom: 1.5rem; } pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.5rem; } /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { width: 100%; box-sizing: border-box; } .u-full-height { height: 100%; box-sizing: border-box; } .u-max-full-width { max-width: 100%; box-sizing: border-box; } .u-max-full-height { max-height: 100%; box-sizing: border-box; } .u-pull-right { float: right; } .u-pull-left { float: left; } /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-line { white-space: pre-line; } .whitespace-pre-wrap { white-space: pre-wrap; } .whitespace-pre { white-space: pre; } .whitespace-normal { white-space: normal; } .whitespace-break-spaces { white-space: break-spaces; } hr { margin-top: 3rem; margin-bottom: 3.5rem; border-top: 1px solid #ABABAB; } .space-new-line { white-space: pre-line; } .overflow-hidden { overflow: hidden; } .overflow-x-scroll { overflow-x: scroll; } .overflow-y-scroll { overflow-y: scroll; } .cursor-pointer { cursor: pointer; } /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Self Clearing Goodness */ .container:after, .row:after, .u-cf { content: ""; display: table; clear: both; } /* Text Transform –––––––––––––––––––––––––––––––––––––––––––––––––– */ .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .text-normal { text-transform: none; } /* Positioning –––––––––––––––––––––––––––––––––––––––––––––––––– */ .text-center { text-align: center; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-relative { position: relative; } /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons on small devices, paste the mobile query code up in the buttons section and style it there. */ /* Larger than mobile */ /* Larger than phablet (also point when grid becomes active) */ /* Larger than tablet */ /* Larger than desktop */ /* Larger than Desktop HD */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ -moz-appearance: button; appearance: button; cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-appearance: textfield; appearance: textfield; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } .top-0 { top: 0px; } .top-0-percents { top: calc(0*1%); } .top-1 { top: 1px; } .top-1-percents { top: calc(1*1%); } .top-5 { top: 5px; } .top-5-percents { top: calc(5*1%); } .top-10 { top: 10px; } .top-10-percents { top: calc(10*1%); } .top-15 { top: 15px; } .top-15-percents { top: calc(15*1%); } .top-20 { top: 20px; } .top-20-percents { top: calc(20*1%); } .top-25 { top: 25px; } .top-25-percents { top: calc(25*1%); } .top-30 { top: 30px; } .top-30-percents { top: calc(30*1%); } .top-35 { top: 35px; } .top-35-percents { top: calc(35*1%); } .top-40 { top: 40px; } .top-40-percents { top: calc(40*1%); } .top-45 { top: 45px; } .top-45-percents { top: calc(45*1%); } .top-50 { top: 50px; } .top-50-percents { top: calc(50*1%); } .top-55 { top: 55px; } .top-55-percents { top: calc(55*1%); } .top-60 { top: 60px; } .top-60-percents { top: calc(60*1%); } .top-65 { top: 65px; } .top-65-percents { top: calc(65*1%); } .top-70 { top: 70px; } .top-70-percents { top: calc(70*1%); } .top-75 { top: 75px; } .top-75-percents { top: calc(75*1%); } .top-80 { top: 80px; } .top-80-percents { top: calc(80*1%); } .top-85 { top: 85px; } .top-85-percents { top: calc(85*1%); } .top-90 { top: 90px; } .top-90-percents { top: calc(90*1%); } .top-95 { top: 95px; } .top-95-percents { top: calc(95*1%); } .top-100 { top: 100px; } .top-100-percents { top: calc(100*1%); } .top-200 { top: 200px; } .top-200-percents { top: calc(200*1%); } .top-300 { top: 300px; } .top-300-percents { top: calc(300*1%); } .top-400 { top: 400px; } .top-400-percents { top: calc(400*1%); } .top-500 { top: 500px; } .top-500-percents { top: calc(500*1%); } .top-600 { top: 600px; } .top-600-percents { top: calc(600*1%); } .top-700 { top: 700px; } .top-700-percents { top: calc(700*1%); } .top-800 { top: 800px; } .top-800-percents { top: calc(800*1%); } .top-900 { top: 900px; } .top-900-percents { top: calc(900*1%); } .top-1000 { top: 1000px; } .top-1000-percents { top: calc(1000*1%); } .bottom-0 { bottom: 0px; } .bottom-0-percents { bottom: calc(0*1%); } .bottom-1 { bottom: 1px; } .bottom-1-percents { bottom: calc(1*1%); } .bottom-5 { bottom: 5px; } .bottom-5-percents { bottom: calc(5*1%); } .bottom-10 { bottom: 10px; } .bottom-10-percents { bottom: calc(10*1%); } .bottom-15 { bottom: 15px; } .bottom-15-percents { bottom: calc(15*1%); } .bottom-20 { bottom: 20px; } .bottom-20-percents { bottom: calc(20*1%); } .bottom-25 { bottom: 25px; } .bottom-25-percents { bottom: calc(25*1%); } .bottom-30 { bottom: 30px; } .bottom-30-percents { bottom: calc(30*1%); } .bottom-35 { bottom: 35px; } .bottom-35-percents { bottom: calc(35*1%); } .bottom-40 { bottom: 40px; } .bottom-40-percents { bottom: calc(40*1%); } .bottom-45 { bottom: 45px; } .bottom-45-percents { bottom: calc(45*1%); } .bottom-50 { bottom: 50px; } .bottom-50-percents { bottom: calc(50*1%); } .bottom-55 { bottom: 55px; } .bottom-55-percents { bottom: calc(55*1%); } .bottom-60 { bottom: 60px; } .bottom-60-percents { bottom: calc(60*1%); } .bottom-65 { bottom: 65px; } .bottom-65-percents { bottom: calc(65*1%); } .bottom-70 { bottom: 70px; } .bottom-70-percents { bottom: calc(70*1%); } .bottom-75 { bottom: 75px; } .bottom-75-percents { bottom: calc(75*1%); } .bottom-80 { bottom: 80px; } .bottom-80-percents { bottom: calc(80*1%); } .bottom-85 { bottom: 85px; } .bottom-85-percents { bottom: calc(85*1%); } .bottom-90 { bottom: 90px; } .bottom-90-percents { bottom: calc(90*1%); } .bottom-95 { bottom: 95px; } .bottom-95-percents { bottom: calc(95*1%); } .bottom-100 { bottom: 100px; } .bottom-100-percents { bottom: calc(100*1%); } .bottom-200 { bottom: 200px; } .bottom-200-percents { bottom: calc(200*1%); } .bottom-300 { bottom: 300px; } .bottom-300-percents { bottom: calc(300*1%); } .bottom-400 { bottom: 400px; } .bottom-400-percents { bottom: calc(400*1%); } .bottom-500 { bottom: 500px; } .bottom-500-percents { bottom: calc(500*1%); } .bottom-600 { bottom: 600px; } .bottom-600-percents { bottom: calc(600*1%); } .bottom-700 { bottom: 700px; } .bottom-700-percents { bottom: calc(700*1%); } .bottom-800 { bottom: 800px; } .bottom-800-percents { bottom: calc(800*1%); } .bottom-900 { bottom: 900px; } .bottom-900-percents { bottom: calc(900*1%); } .bottom-1000 { bottom: 1000px; } .bottom-1000-percents { bottom: calc(1000*1%); } .left-0 { left: 0px; } .left-0-percents { left: calc(0*1%); } .left-1 { left: 1px; } .left-1-percents { left: calc(1*1%); } .left-5 { left: 5px; } .left-5-percents { left: calc(5*1%); } .left-10 { left: 10px; } .left-10-percents { left: calc(10*1%); } .left-15 { left: 15px; } .left-15-percents { left: calc(15*1%); } .left-20 { left: 20px; } .left-20-percents { left: calc(20*1%); } .left-25 { left: 25px; } .left-25-percents { left: calc(25*1%); } .left-30 { left: 30px; } .left-30-percents { left: calc(30*1%); } .left-35 { left: 35px; } .left-35-percents { left: calc(35*1%); } .left-40 { left: 40px; } .left-40-percents { left: calc(40*1%); } .left-45 { left: 45px; } .left-45-percents { left: calc(45*1%); } .left-50 { left: 50px; } .left-50-percents { left: calc(50*1%); } .left-55 { left: 55px; } .left-55-percents { left: calc(55*1%); } .left-60 { left: 60px; } .left-60-percents { left: calc(60*1%); } .left-65 { left: 65px; } .left-65-percents { left: calc(65*1%); } .left-70 { left: 70px; } .left-70-percents { left: calc(70*1%); } .left-75 { left: 75px; } .left-75-percents { left: calc(75*1%); } .left-80 { left: 80px; } .left-80-percents { left: calc(80*1%); } .left-85 { left: 85px; } .left-85-percents { left: calc(85*1%); } .left-90 { left: 90px; } .left-90-percents { left: calc(90*1%); } .left-95 { left: 95px; } .left-95-percents { left: calc(95*1%); } .left-100 { left: 100px; } .left-100-percents { left: calc(100*1%); } .left-200 { left: 200px; } .left-200-percents { left: calc(200*1%); } .left-300 { left: 300px; } .left-300-percents { left: calc(300*1%); } .left-400 { left: 400px; } .left-400-percents { left: calc(400*1%); } .left-500 { left: 500px; } .left-500-percents { left: calc(500*1%); } .left-600 { left: 600px; } .left-600-percents { left: calc(600*1%); } .left-700 { left: 700px; } .left-700-percents { left: calc(700*1%); } .left-800 { left: 800px; } .left-800-percents { left: calc(800*1%); } .left-900 { left: 900px; } .left-900-percents { left: calc(900*1%); } .left-1000 { left: 1000px; } .left-1000-percents { left: calc(1000*1%); } .right-0 { right: 0px; } .right-0-percents { right: calc(0*1%); } .right-1 { right: 1px; } .right-1-percents { right: calc(1*1%); } .right-5 { right: 5px; } .right-5-percents { right: calc(5*1%); } .right-10 { right: 10px; } .right-10-percents { right: calc(10*1%); } .right-15 { right: 15px; } .right-15-percents { right: calc(15*1%); } .right-20 { right: 20px; } .right-20-percents { right: calc(20*1%); } .right-25 { right: 25px; } .right-25-percents { right: calc(25*1%); } .right-30 { right: 30px; } .right-30-percents { right: calc(30*1%); } .right-35 { right: 35px; } .right-35-percents { right: calc(35*1%); } .right-40 { right: 40px; } .right-40-percents { right: calc(40*1%); } .right-45 { right: 45px; } .right-45-percents { right: calc(45*1%); } .right-50 { right: 50px; } .right-50-percents { right: calc(50*1%); } .right-55 { right: 55px; } .right-55-percents { right: calc(55*1%); } .right-60 { right: 60px; } .right-60-percents { right: calc(60*1%); } .right-65 { right: 65px; } .right-65-percents { right: calc(65*1%); } .right-70 { right: 70px; } .right-70-percents { right: calc(70*1%); } .right-75 { right: 75px; } .right-75-percents { right: calc(75*1%); } .right-80 { right: 80px; } .right-80-percents { right: calc(80*1%); } .right-85 { right: 85px; } .right-85-percents { right: calc(85*1%); } .right-90 { right: 90px; } .right-90-percents { right: calc(90*1%); } .right-95 { right: 95px; } .right-95-percents { right: calc(95*1%); } .right-100 { right: 100px; } .right-100-percents { right: calc(100*1%); } .right-200 { right: 200px; } .right-200-percents { right: calc(200*1%); } .right-300 { right: 300px; } .right-300-percents { right: calc(300*1%); } .right-400 { right: 400px; } .right-400-percents { right: calc(400*1%); } .right-500 { right: 500px; } .right-500-percents { right: calc(500*1%); } .right-600 { right: 600px; } .right-600-percents { right: calc(600*1%); } .right-700 { right: 700px; } .right-700-percents { right: calc(700*1%); } .right-800 { right: 800px; } .right-800-percents { right: calc(800*1%); } .right-900 { right: 900px; } .right-900-percents { right: calc(900*1%); } .right-1000 { right: 1000px; } .right-1000-percents { right: calc(1000*1%); } /*# sourceMappingURL=basicss.css.map */