.font-arvo { font-family: "Arvo"; } .font-roboto { font-family: Roboto; } .section-title-1 { font-size: 1rem; line-height: 1em; } .p1 { padding: .1em; } .p2 { padding: .2em; } .p3 { padding: .3em; } .bold { font-weight: bold; } .italic { font-weight: italic; } .text-shadow-1 { text-shadow: 1px 1px #888; } /* * -- OVERRIDE SPLASH STYLES -- * This is the blue top section that appears on the page. */ .splash-container { background-color: #1f8dd6; background-image: url('../img/StockSnap_ZNUHYB5G3U.jpg'); background-repeat: no-repeat; background-size: 100%; z-index : 1; overflow: hidden; /* The following styles are required for the "scroll-over" effect */ width: 100%; height: 60%; top: 0; left: 0; position: fixed !important; } .splash { /* absolute center .splash within .splash-container */ width: 80%; height: 50%; margin: 60px auto auto; position: absolute; top: 100px; left: 0; bottom: 0; right: 0; text-align: center; text-transform: uppercase; } /* This is the main heading that appears on the blue section */ .splash-head { font-size: 20px; font-weight: bold; color: white; border: 3px solid white; padding: 1em 1.6em; font-weight: 100; border-radius: 5px; line-height: 1em; } /* This is the subheading that appears on the blue section */ .splash-subhead { color: white; letter-spacing: 0.05em; opacity: 0.8; } /* Override .content-wrapper */ .content-wrapper { top: 20%; } .content-head { margin-top: 20px ; } .ribbon-project { background-color: rgb(200, 200, 80); color: white; } .ribbon-visi { /*background-color: rgb(80, 200, 200);*/ background: rgb(80, 200, 200) url('../img/StockSnap_ZNUHYB5G3U.jpg'); background-size: 100%; padding: 1em; height: 88%: } .ribbon-visi .content-head { margin: 0 auto 0; padding: .5em; font-size: 3em; text-shadow: 1px 1px #eee; background-color: rgba(70, 70, 70, .7); } .ribbon-visi-content { font-size: 2em; padding: .5em; line-height: 1.2em; margin: .5em; color: rgb(240, 240, 240); text-shadow: 1px 1px rgb(80, 80, 80); background-color: rgba(80, 80, 80, .7); } .ribbon-misi { } .bg-primary { background-color: rgb(220, 220, 100); } .w3-theme-l5 {color:#000 !important; background-color:#fdfaf4 !important} .w3-theme-l4 {color:#000 !important; background-color:#f7efda !important} .w3-theme-l3 {color:#000 !important; background-color:#efdfb5 !important} .w3-theme-l2 {color:#000 !important; background-color:#e7cf90 !important} .w3-theme-l1 {color:#000 !important; background-color:#e0bf6b !important} .w3-theme-d1 {color:#fff !important; background-color:#d3a42e !important} .w3-theme-d2 {color:#fff !important; background-color:#bc9228 !important} .w3-theme-d3 {color:#fff !important; background-color:#a58023 !important} .w3-theme-d4 {color:#fff !important; background-color:#8d6e1e !important} .w3-theme-d5 {color:#fff !important; background-color:#765c19 !important} .w3-theme-light {color:#000 !important; background-color:#fdfaf4 !important} .w3-theme-dark {color:#fff !important; background-color:#765c19 !important} .w3-theme-action {color:#fff !important; background-color:#765c19 !important} .w3-theme {color:#000 !important; background-color:#d8ae47 !important} .w3-text-theme {color:#d8ae47 !important} .w3-theme-border {border-color:#d8ae47 !important} .w3-hover-theme:hover {color:#000 !important; background-color:#d8ae47 !important} .w3-theme-l5 {color:#000 !important; background-color:#fdfbf4 !important} .w3-theme-l4 {color:#000 !important; background-color:#f7f3da !important} .w3-theme-l3 {color:#000 !important; background-color:#efe8b5 !important} .w3-theme-l2 {color:#000 !important; background-color:#e7dc90 !important} .w3-theme-l1 {color:#000 !important; background-color:#e0d06b !important} .w3-theme-d1 {color:#000 !important; background-color:#d3bd2e !important} .w3-theme-d2 {color:#fff !important; background-color:#bca928 !important} .w3-theme-d3 {color:#fff !important; background-color:#a59423 !important} .w3-theme-d4 {color:#fff !important; background-color:#8d7f1e !important} .w3-theme-d5 {color:#fff !important; background-color:#766919 !important} .w3-theme-light {color:#000 !important; background-color:#fdfbf4 !important} .w3-theme-dark {color:#fff !important; background-color:#766919 !important} .w3-theme-action {color:#fff !important; background-color:#766919 !important} .w3-theme {color:#000 !important; background-color:#d8c547 !important} .w3-text-theme {color:#d8c547 !important} .w3-theme-border {border-color:#d8c547 !important} .w3-hover-theme:hover {color:#000 !important; background-color:#d8c547 !important} .color-1 {color: #d8ae47;} .color-2 {color: #bad847;} .color-3 {color: #71d847;} .color-4 {color: #47d866;} .color-5 {color: #47d8ae;} .color-6 {color: #47b9d8;} .bgcolor-1 {background-color: #d8ae47;} .bgcolor-2 {background-color: #bad847;} .bgcolor-3 {background-color: #71d847;} .bgcolor-4 {background-color: #47d866;} .bgcolor-5 {background-color: #47d8ae;} .bgcolor-6 {background-color: #47b9d8;} /* * -- TABLET (AND UP) MEDIA QUERIES -- * On tablets and other medium-sized devices, we want to customize some * of the mobile styles. */ @media (min-width: 48em) { /* We increase the body font size */ body { font-size: 16px; } .p1 { padding: 1em; } .p2 { padding: 2em; } .p3 { padding: 3em; } .section-title-1 { font-size: 3em; } /* We can align the menu header to the left, but float the menu items to the right. */ .home-menu { text-align: left; } .home-menu ul { float: left; } /* We increase the height of the splash-container */ /* .splash-container { height: 500px; }*/ .splash-container { height: 88%; } /* We decrease the width of the .splash, since we have more width to work with */ .splash { width: 70%; height: 50%; } .splash-head { font-size: 200%; } .content-wrapper { top: 87%; } .ribbon-visi .content-head { } .ribbon-visi-content { font-size: 3em; } /* We remove the border-separator assigned to .l-box-lrg */ .l-box-lrg { border: none; } } /* * -- DESKTOP (AND UP) MEDIA QUERIES -- * On desktops and other large devices, we want to over-ride some * of the mobile and tablet styles. */ @media (min-width: 78em) { /* We increase the header font size even more */ .splash-head { font-size: 250%; } }