/* font-family: 'Nothing You Could Do', cursive; font-family: 'Oswald', sans-serif; font-family: 'Josefin Sans', sans-serif; font-family: 'Noto Color Emoji', sans-serif; font-family: 'Forum', serif; font-family: 'Lato', sans-serif; font-family: 'Playfair Display', serif; Colors Light Peach: #d8c7ba; Sea Glass: #759188; Blue Grey: #3a4a53; Red clay: #7b3d3a; Red Clay Lt: #dcccca; Teal Blue:#456c7b; Dark Grey: #3e3e41; Periwinkle: #56687f; Cream: #d7d8cc; Lt Cream: #edebe8; Light Blue: #c5d2d6; Warm lt grey: #d8dad8; */ /*CSS Reset*/ /*** The new CSS reset - version 1.11.1 (last updated 24.10.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Variables */ :root { --primary-dark: #072536; --primary: #10567E; --primary-lt: #56687f; --primary-bling: 26,135,199; --secondary-dark: #3a4a53; --secondary: #759188; --secondary-lt: #99BDB1; --ternary: ##456c7b; --ko: 237,235,232; --dark: #3e3e41; --light: #d8dad8; --accent: #d8c7ba; --accent-2: #7b3d3a; --accent-2-lt:#dcccca; --soft-shadow: var(--dark) 0 0 .75rem -.25rem; --typeface-primary: 'Oswald', sans-serif; --typeface-secondary: 'Lato', sans-serif; --typeface-icons: 'Font Awesome 6 Pro', sans-serif; --letterpress: -.02rem -.02rem 1px rgba(255,255,255,.3), .02rem .02rem 1px rgba(0,0,0,.5); --fire-bling: #EFAB57; --fire: #EB701E; --fire-dark: #CE5D12; --fire-lt: #F09456;; } /* Global Styles */ html, body { font-size: 20px; font-family: var(--typeface-secondary); color: var(--dark); background: var(--light); line-height: 1.8rem; background: url(../img/colorful-feathers-optimized.jpg); background-size: cover; background-attachment: fixed; background-position: 0 100%; } .container.page { box-shadow: var(--dark) 0 0 .5rem -.25rem; background: rgba(250,250,250,.88); margin-bottom: 0; padding-bottom: 0; border-bottom: var(--secondary) solid 6px; border-radius: 0 0 6px 6px; } main.container { padding-top: 4.5rem; padding-right: calc(var(--bs-gutter-x) * 1); padding-left: calc(var(--bs-gutter-x) * 1); } .modal-content { background: rgba(255,255,255,.93 ); } #home main.container { padding-top: 400px; } .jumbotron { padding: 5.1rem 0 .25rem 0; color: var(--accent); margin: -1rem auto; position: absolute; width: 100%; left: 0; top:0; background: url(../img/navy-gold-soft-light.jpg) bottom; background-repeat: no-repeat; background-color: rgba(7,37,54,0.92); background-blend-mode: overlay; background-size: cover; height: 400px; } .jumbotron.tro { background: url(../img/brand-tro/fb-cover-gyo.png); } .display-5 { color: var(--accent); font-family: 'playfair display', serif; } header nav { background: var(--secondary); color: rgba(var(--ko)); box-shadow: var(--dark) 0 0 .15rem .025rem; padding: 0; border-bottom: var(--primary) solid 3px; } footer ul, #resume footer ul, #resume header nav ul { margin-left: 0; padding: 0; margin-top: 0; border: none; } header .nav-link { color: var(--accent-lt); font-size: 1rem; line-height: 2.75rem; text-shadow: var(--letterpress); } .navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color: var(--accent-lt); } .navbar-brand { font-size: 1.75rem; color: var(--primary-dark); text-shadow: -.02rem -.02rem 1px rgba(255,255,255,.5); font-family: 'Playfair Display'; font-weight: 600; } .navbar-brand span.tagline { font-family: 'Golden Graph', var(--typeface-secondary); font-weight: 300; font-style: italic; font-size: .95rem; /* baseline-shift: 50.5rem; */ color: var(--accent); text-shadow: var(--letterpress); /* margin-left: 10px; */ rotate: 357deg; /* baseline-shift: 8px; */ } .hard-center { text-align: center; margin-top:1rem; } .offcanvas, .submit { background: rgba(7,37,54,0.8); } .offcanvas-title { font-size: 1.5rem; } .offcanvas, .offcanvas a, .offcanvas a:visited, .btn-close { color: var(--accent-lt); } .offcanvas a:hover, .btn-close:hover { color: var(--accent-2-lt); } .btn-close { content: "/f00d"; background-image: none; font-family: var(--typeface-primary); padding: 0; margin-right: 0; margin-bottom: 0; } span.category { position: absolute; top: 0; right: 0; padding: 0.55rem 0.25rem 0.25rem; width: 27px; text-align: center; line-height: 10px; border: 1px solid var(--secondary); border-radius: 0 0 0 8px; background: var(--secondary); color: var(--accent); } a:has(div.card) { text-decoration: none; } .img-inset { padding: 8px; } .card-link { height:100%; } .card { background-color: rgba(var(--ko), .4); /* background-blend-mode: screen; */ height: 100%; } .card-header { font-family: var(--typeface-primary); padding: 0 .5rem; /* margin-bottom: .5rem; */ font-size: 2rem; } .card-header:after { font-family: 'Font Awesome 6 Pro'; font-weight: 400; font-size: large; padding: 0.25rem 0 0.25rem 0.5rem; /* display: inline-flex; */ /* clear: left; */ float: right; border-inline-start: thin solid #666; margin: 0 0 0 0.5rem; color: var(--bs-card-color); } .logo .card-header:after { content: '\f577'; } .pkg .card-header:after { content: '\f1b2'; } .print .card-header:after { content: '\f02f'; } .wayfinding .card-header:after { content: '\f277'; } .merch .card-header:after { content: '\f02b'; } .web .card-header:after { content: '\f121'; } .diagram .card-header:after { content: '\f200'; } .promo .card-header:after { content: '\f675'; } .photo .card-header:after { content: '\f030'; } .presentation .card-header:after { content: '\f6a3'; } .modal .btn { font-size: 1rem; } .btn-next::after { font-family: 'Font Awesome 6 Pro'; content: '\f0da'; font-weight: 900; margin-left:5px; } .btn-prev:before { font-family: 'Font Awesome 6 Pro'; content: '\f0d9'; font-weight: 900; margin-right:5px; } .btn-start:before { font-family: 'Font Awesome 6 Pro'; content: '\e50d'; margin-right:5px; font-weight: 900; } .btn-view:after { font-family: 'Font Awesome 6 Pro'; content: '\f1e5'; font-weight: 900; margin-left:5px; } .btn-close:before { font-family: 'Font Awesome 6 Pro'; content: '\f00d'; font-weight: 900; font-size:xx-large; color:var(--primary); } .offcanvas .btn-close:before { color:var(--accent); font-weight: 200; } .btn-close { margin-top:0; position:absolute; top: 22px; right: 28px; opacity: initial; } .card h3, .card-header { color:var(--primary); font-size: 1.25rem; /* text-shadow: var(--letterpress); */ /* border-bottom: thin solid var(--primary); border-bottom-style: inset; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-bottom: .25rem; */ } .card-text { font-size: .9rem; line-height: 1.5rem; } .small, small { font-size: .65rem; line-height: .5rem; /* vertical-align: middle; */ } .card-footer h4 { color: var(--primary); transform: rotate(-90deg); position: absolute; left: 0; bottom: 0; } .card-footer:before { font-family: 'Font Awesome 6 Pro'; font-weight:400; content:'\f552'; font-size: x-large; padding: .75rem .5rem .75rem 0; float: left; border-inline-end: thin solid #666; margin-right: .5rem; color: var(--bs-card-color); } .card-footer { line-height: .8rem; padding: .5rem; vertical-align: middle; } button:has(div.card):hover .card-footer { color:var(--secondary); transition: .5s ease; } em { font-style: italic; } span.note { float: left; margin-left: -25px; font-size: 1rem; color: var(--primary); } /* Form Styles */ .antispam { display:none; } .form-group { margin-bottom: 1rem; margin-top: 1rem; } .form-floating { margin-bottom: 1rem; color: var(--primary); } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary-dark); --bs-btn-hover-color: var(--ko); --bs-btn-hover-bg: var(--primary-lt); --bs-btn-hover-border-color: var(--secondary-dark); --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--accent-2); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #0d6efd; --bs-btn-disabled-border-color: #0d6efd; } .submit { float:right; box-shadow: none; } .btn-secondary, .btn-primary { box-shadow: none; border-radius: .2rem; } input, textarea { border-radius: 0.375rem; box-shadow: inset 2px 2px 8px rgba(55, 94, 148, 0.3), inset -3px -2px 5px rgba(255, 255, 255, 0.8); } .form-floating>textarea.form-control { min-height: calc(10rem + calc(var(--bs-border-width) * 10)); } .form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label { color: rgba(var(--primary-bling),0.6); } .form-control:focus { border-color: rgba(var(--primary-bling),0.5); } /* Typography */ h1, h2, h3 { font-family: var(--typeface-primary); color: var(--primary); } h1 { font-size: 1.5rem; } h2 { font-size: 1.4rem; font-weight: 400; margin-bottom: .5rem; } h3 span { font-size: .75rem; font-style: italic; float: right; color: var(--secondary); line-height: 2rem; font-weight:200; } #resume h2 { margin-bottom: .25rem; } h3 { font-size: 1.1rem; margin-bottom: .5rem; font-weight: 400; color: var(--primary); /* font-family: var(--typeface-secondary); */ } #resume h3 { font-size: 1.2rem; margin-bottom: .4rem; font-weight: 400; color: var(--primary); } h4 { font-size: 1.3rem; font-weight: 500; } /* #resume*/ h4 { font-family: var(--typeface-primary); font-size: .95rem; margin-bottom: .4rem; font-weight: 400; color: var(--secondary); } h5 { font-size: 1.2rem; font-weight: 400; } h6 { font-size: 1.1rem; font-weight: 300; } p, ul, ol, dl, li, dt, dd { font-weight: 300; } p { margin-bottom: .75rem; } ol { list-style: auto; margin-left: 2rem; } ul { list-style-type: disc; margin-left: 1rem; } i { font-family: var(--typeface-icons); } main ul li { line-height: 1.4rem; margin-bottom: .4rem; } #resume main ul { list-style: none; /* Remove default bullets */ } #resume main ul li::before { font-family: 'Font Awesome 6 Pro'; content: "\e5b7"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: var(--secondary); /* Change the color */ font-weight:900; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1rem; /* Also needed for space (tweak if needed) */ margin-left: -1.3rem; /* Also needed for space (tweak if needed) */ --fa-primary-color: rgba(var( --ko), 1); --fa-secondary-color: var( --secondary); font-size:.5rem; margin-right: .3rem; rotate: 180deg; padding: 3px 0 0 0; } figure img { max-width: 100%; border-radius: .85rem; box-shadow: var(--dark) 0 0 .75rem -.25rem; margin-top: .75rem; } figure img.flat { box-shadow: none; } figcaption { font-size: .65rem; margin-top: .3rem; font-weight:300; border-left: dotted .05rem var(--secondary-lt); padding-left: .5rem; line-height: .9rem; } p.em { font-size: 1.2rem; } .sidebar h2 { margin-bottom: .5rem } #resume .sidebar h3 { font-size: 1rem; font-weight: 400; margin-bottom: .1rem; } .sidebar h4, .sidebar h5 { font-family: var(--typeface-primary); font-size: .9rem; color: var(--secondary); } .sidebar h4 { font-weight: 400; margin-bottom:0; } .sidebar h5 { font-weight: 300; margin-bottom: 1rem; } #resume main ul { border-left: dotted .05rem var(--secondary-lt); padding-left: .5rem; margin-left: 0; margin-top: 1rem; } .sidebar ul li { /* font-size: .9rem;*/ margin-bottom: .25rem; } footer.row { margin-top: 4rem; } footer nav { flex-wrap: nowrap; } footer, footer li a.nav-link { text-align: center; color: var(--primary-dark); } footer i { font-size: 1.1rem; } aside { font-size: .75rem; line-height: 1.5rem; background: rgba(var(--ko), .4); background-blend-mode: overlay; padding: 8px; border-radius: 8px; } .custom-tooltip { --bs-tooltip-bg: rgba(var(--primary-bling), .95); --bs-tooltip-color: var(--accent); font-size: .7rem; } * { box-sizing: border-box; } .wrapper { min-height: 100vh; } .block { display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: aliceblue; } .block__pic { width: 306px; height: 198px; } .block__title { margin-bottom: 30px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 25px; } /* link states */ a { color: var(--secondary); } a:visited { color: var(--primary-dark); } a:hover { color: var(--accent-2); } a:active { color: var(--accent); } .card-link:hover .card { box-shadow: var(--dark) 0 0 .5rem -.25rem; transition: 0.5s ease; } .card-link:hover span.category { background-color: var(--secondary); color: rgba(var(--ko), 1); transition: 0.5s ease; } footer ul li a.html5 { color: #E34C26; } footer ul li a.html5:visited { color: var(--dark); } footer ul li a.html5:hover { color: #F06529; } footer ul li a.html5:active { color: #FF6B2C; } footer ul li a.css3 { color: #264de4; } footer ul li a.css3:visited { color: var(--dark); } footer ul li a.css3:hover { color: #2965f1; } footer ul li a.css3:active { color: #74bce9; } footer ul li a.planning { color: var(--primary-dark); } footer ul li a.planning:visited { color: var(--dark); } footer ul li a.planning:hover { color: var(--accent-2); } footer ul li a.planning:active { color: var(--accent-2-lt); } footer ul li a.wayfinding { color: var(--primary-dark); } footer ul li a.wayfinding:visited { color: var(--dark); } footer ul li a.wayfinding:hover { color: var(--primary-lt); } footer ul li a.wayfinding:active { color: var(--accent-2-lt); } footer ul li a.linkedin { color: #0077B5; } footer ul li a.linkedin:visited { color: var(--dark); } footer ul li a.linkedin:hover { color: #00A0DC; } footer ul li a.linkedin:active { color: #8D6CAB; } footer ul li a.behance { color: #153ebb; } footer ul li a.behance:visited { color: var(--dark); } footer ul li a.behance:hover { color: #053eff; } footer ul li a.behance:active { color: #8D6CAB; } a.btn.disabled, button.btn.disabled { /* color: var(--bs-btn-disabled-color);*/ pointer-events: none; /* background-color: var(--bs-btn-disabled-bg); border-color: var(--bs-btn-disabled-border-color); */ opacity: initial; padding:0; border: none; text-align: left; } /*Scroll to top button*/ #scrollTop{ display:none; font-size: .8rem; right: .5rem; bottom: .5rem; width: 2.5rem; height: 3rem; text-align: center; position: fixed; border: 1px solid var(--primary); border-radius: .5rem; background-color: rgba(var(--ko), .3); color: var(--primary); cursor: all-scroll; transition: 0.5s; text-decoration: none; padding: .5rem; transition: background-color .5s; line-height: 1rem; } #scrollTop i { margin-bottom: .65rem; } #scrollTop:hover{ background-color: rgba(240,240,240,.5); color: var(--fire); transition: 0.5s; box-shadow: var(--soft-shadow); border-color: var(--fire-lt); } #scrollTop:active{ background-color: rgba(255,255,255,0.8); color: var(--fire-bling); } /*gallery styles*/ .gallery-title { font-size: 36px; color: #42B32F; text-align: center; font-weight: 500; margin-bottom: 70px; } .gallery-title:after { content: ""; position: absolute; width: 7.5%; left: 46.5%; height: 45px; border-bottom: 1px solid #5e5e5e; } .filters { display:flex; justify-content:center; } .filter-button, .modal-footer button { font-size: 18px; border: thin solid rgba(240, 240, 240, 0.6); border-radius: .5rem; text-align: center; color: var(--primary); margin-bottom: 1rem; background-color: var(--ko); box-shadow: 5px 5px 10px rgba(55, 94, 148, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.6); transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out; margin-left: .5rem; margin-right: .5rem; } .filter-button:hover, .modal-footer button:hover { background-color: #fff; border: thin solid rgba(240, 240, 240, 0.6); box-shadow: 5px 5px 10px rgba(55, 94, 148, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.6); transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out; color: var(--fire); } .btn-default:active .filter-button:active, .modal-footer button:active { color: var(--fire-bling); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); box-shadow: var(--bs-btn-active-shadow); } .filters .filter-btn, .modal-footer button { position: relative; color: var(--primary); border-radius: 5rem; background-color: var(--ko); border: thin solid rgba(240, 240, 240, 0.6); box-shadow: 5px 5px 10px rgba(55, 94, 148, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.4); transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out; } .filters .btn-check:checked + .filters .btn, :not(.btn-check) + .filters .btn:active, .filters .btn:first-child:active,.filters .btn.active,.filters .btn.show { color: var(--fire-bling); background-color: var(--bs-btn-active-bg); border-color: var(--primary-lt); box-shadow: var(--bs-btn-active-shadow); } .filters .btn:focus, .filters .btn:active, .filters .btn:active:focus { /* background-color: #d9e3f1; */ border: thin solid var(--fire-lt); box-shadow: 5px 5px 10px rgba(55, 94, 148, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.4); transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out; color: var(--fire-bling); } .submit { /* background: rgba(7,37,54,) !important; */ color: var(--accent); } .submit:hover { background: rgba(var(--primary-bling), .5) !important; color: rgba(var(--ko), 1); } .submit:active { background-color: var(--ko) !important; color: var(--fire-bling) !important; } .port-image { width: 100%; } .gallery-product { margin-bottom: 30px; } .tilt { transform: rotate(-4deg); box-shadow: var(--soft-shadow); margin-bottom: .7rem; } .tilt2 { transform: rotate(5deg); box-shadow: var(--soft-shadow); margin-bottom: .7rem; } .tilt3 { transform: rotate(-2deg); box-shadow: var(--soft-shadow); margin-bottom: .7rem; } @media screen and (min-width:992px) { .navbar { padding: 0; } .nav-link { padding: 0 var(--bs-nav-link-padding-x); } .nav-item { margin: 8px 3px; } header .nav-item:last-of-type { border-left: thin solid; } nav ul { margin-left: 0; padding: 0 1rem; margin-top: 0; } } @media screen and (max-width: 992px){ .offcanvas { padding: 1.5rem; } .offcanvas a { font-size: 1.35rem; line-height: 4rem; } } @media screen and (min-width: 992px) and (max-width: 1400px) { nav.navbar .nav-link { font-size: .8rem; } .navbar-brand, .navbar-brand span.tagline { font-size: 1.25rem; } .navbar-brand span.tagline { font-size: .7rem; } #home .jumbotron { height: 405px; } #home .jumbotron h1 { font-size: 2.5rem; } } @media screen and (min-width: 768px) and (max-width: 991px) { html, body { font-size: 16px; } .sidebar .container-fluid { padding: 0; } div.card-footer { padding: .5rem } .card-footer:before { font-size: larger; padding-top: .9rem; } } @media screen and (min-width: 768px) and (max-width: 874px) { #home .jumbotron p { font-size: 1.2rem; line-height: 2.2rem; } } @media screen and (min-width: 576px) and (max-width: 767px) { .card-header { font-size: .8rem; } .card-header:after, .card-footer:before { font-size:small; padding: 0.1rem 0 0.1rem 0.1rem; display: none; } .card-footer { line-height: 0; padding: .25rem; } .text-body-secondary { font-size: .5rem; } } @media screen and (min-width: 654px) { .jumbotron span { display:block; } } @media screen and (max-width: 767px) { .navbar-brand { font-size: 1.25rem; } .navbar-brand span.tagline { font-size: .8rem; } .sidebar .row>* { padding: 0; } .sidebar h2 { font-size: 1.3rem; } #resume h3 { font-size: 1.15rem; font-weight: 400; margin-bottom: .1rem; } #resume h4 { margin-bottom: .1rem; } #education { padding: 0 .75rem; } .sidebar ul li { font-size: 1.1rem; line-height: 1.5rem; } main.container { padding: 4.25rem .25rem; } #home .jumbotron h1 { font-size: 1.5rem; } #home .jumbotron p { font-size: .9rem; line-height: 1.5rem; } footer.row { margin-top: 0; } .filters { display: block; justify-content: normal; } } @media screen and (min-width: 465px) and (max-width: 575px) { .row-cols-xs-2>*{flex:0 0 auto;width:50%;} .card-header { font-size: 1rem; } .card-header:after { font-size:medium; padding: 0.25rem 0 0.25rem 0.5rem; display: auto; } .card-footer:before { font-size: 1rem; padding: 1rem; display: auto; } .card-footer { line-height: .5rem; padding: .25rem; } .text-body-secondary { font-size: .6rem; } } @media screen and (min-width: 464px) and (max-width: 465px) { .card-footer:before { font-size: 1rem; padding: .5rem; display: auto; margin-top: .25rem; } .card-footer { line-height: .1rem; padding: .5rem .2rem; } .text-body-secondary { font-size: .55rem; } } @media screen and (max-width: 575px) { .jumbotron { padding: 7.5rem .5rem .25rem .5rem; height: 435px; } #home .jumbotron h1 { font-size: 1.8rem } #home .jumbotron p { line-height: 1.35rem; } #home main.container { padding-top: 435px; } html, body { font-size: 18px; } .navbar-brand { font-size: 1rem; } .navbar-brand span.name { display:block; padding-right: 1.6rem; font-size: 1.8rem; } .navbar-brand span.tagline { font-size: .9rem; text-align: right; padding-right: 0; display: block; padding-top: 3px; } .sidebar h2 { font-size: 1.5rem; } .sidebar ul li { font-size: 1.2rem; line-height: 2rem; } /* #home main.container { padding-top: 24rem; } */ } @media screen and (max-width: 489px) { .navbar-brand { text-align: center; font-size: 1.55rem; line-height: 1.3rem; padding-top: .5rem; padding-right: .1rem; display: block; } .navbar-brand span.tagline { display:block; font-size: .8rem; padding-top: .5rem; padding-right: 0; text-align: right; } /* #home main.container { padding-top: 26.5rem; } */ .jumbotron { padding: 6rem .5rem .25rem .5rem; } } @media screen and (max-width: 456px) { #home .jumbotron h1 { font-size: 1.5rem; } } @media screen and (max-width: 426px) { #home .jumbotron h1 { font-size: 1.5rem; } #home .jumbotron p { font-size: .9rem; line-height: 1.25rem; } } @media screen and (max-width: 401px) { .modal-footer { padding: 0; } } @media screen and (max-width: 390px) { #home .jumbotron { height: 500px; } #home .jumbotron h1 { font-size: 1.75rem; } #home .jumbotron p { font-size: .9rem; line-height: 1.5rem; } #home main.container { padding-top: 500px; } } @media screen and (max-width: 346px) { #home .jumbotron h1 { font-size: 1.5rem; } #home .jumbotron p { font-size: .9rem; line-height: 1.25rem; } }