/* Theme Name: Midwest Trust Description: Your customized theme by Indicia Design Author: Indicia Design Author URI: http://www.indiciadesign.com */ /* =========================== CONTENTS: 01 Imports 02 Site Styles 03 Media Queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Imports ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/normalize.css"; @import "css/skeleton.css"; /* ---------------------------------------------------------------------------------------------------------- 02 Site Styles ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .pushmenu { position: relative } header { display: block; background: rgba(255,255,255,.9); position: relative; width: 100%; height: 10%; min-height: 75px; z-index: 1; } header img { /*border-top: 1px #6bbea5 solid;*/ padding: 1em 0 ; margin: 1em 0 1em 0} .mwt-logo { max-width: 50%; } header .button { display: none } .menu-link { float: right; text-transform: uppercase; font-weight: 700; margin-top: 10%; } #menu-navigation { display: none } .panel { background: #69b2bf; position: fixed; right: -15.625em; width: 15.625em; overflow-y: scroll; } .panel ul.menu { text-transform: uppercase; font-family: "kepler-std",serif; font-weight: 600; font-size: 1.4rem; line-height: 1.5rem; padding: 2rem} .panel ul.menu li { list-style: none; } .panel ul.menu li a { color: #444; } .panel ul.menu li ul { font-family: "proxima-nova", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.1rem; margin: .5rem 0 2rem 0; } .panel ul.menu li ul li { margin-bottom: .5rem } .panel ul.menu li ul li a { color: #EEE; } .home { height: 450px; width: 100%; background-image: url('images/home-bridge-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center} .home .container { position: relative; top: 50%;transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .home hr { border-top: 2px solid #FFF; } .home h2, .home h3 { color: #FFF; margin-bottom: 0; } .home h3, footer h3 { font-family: "proxima-nova",sans-serif; font-weight: 800; text-transform: uppercase } .home-content { padding: 1.5em 0; } .home-content h5 { color: #333; margin-top: 5%; } ul.homelinks li { width: 100%; float: left; list-style: none } ul.homelinks li a:hover { opacity: .7; } .sec-header { height: 300px; width: 100%; background-image: url('images/sec-hdr.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin: 0 0 2em 0; } .sec-header .container { position: relative; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .sec-header p { color: #FFF; text-transform: uppercase; font-weight: 700; letter-spacing: .1rem; margin-bottom: .5em; } .sec-header h4 { color: #FFF; margin-bottom: 0; } .sec-page { margin-bottom: 2rem } .sec-page ul { color: #436b7d; list-style: none; padding-left: 0; font-size: 1.65rem; width: 75%; } .sec-page ul li { border-bottom: 1px #DDD solid; line-height: 1.2; margin-bottom: 1em; padding-bottom: 1em } .sec-page ul li strong { text-transform: uppercase; color: #6bbea5; font-weight: 500; } .sec-page ul li em { color: #e57a3c } ul.sec-pages-nav { text-transform: uppercase; padding-left: 0; font-size: 1.35rem } ul.sec-pages-nav li { list-style: none; border-bottom: 1px #DDD solid; padding-bottom: .9em; margin-bottom: .9em; } ul.sec-pages-nav li.current_page_item a { color: #e57a3c } ul.sec-pages-nav li a { text-decoration: none; color: #666 } ul.sec-pages-nav li a:hover { color: #e57a3c } ul.side-peoplepager { list-style: none; padding: 0; margin: 0 } ul.side-peoplepager li { float: left; width: 47%; margin-right: 3%; margin-bottom: 1rem; border-bottom: 1px #DDD solid; } ul.side-peoplepager li p { font-size: 12px; line-height: 1.1; margin-bottom: 1rem; } ul.side-peoplepager li h6 { font-family: "kepler-std",serif; font-weight: 500; color: #6bbea5; margin-bottom: .25rem; line-height: 1; font-size: 1.1em; } ul.side-peoplepager li a { color: #333; } ul.side-peoplepager li:nth-of-type(2n+0) { margin-right: 0; } ul.side-icons-nav { display: none } /* PEOPLE */ .people-bios { font-size: .9em; } .people-bios p, .people-bios img { margin-bottom: .5em; } .people-bios h2 { color: #436b7d; margin-bottom: .5em; line-height: 2.76rem } .people-bios h2 span { color: #e57a3c; font-size: 40%; font-family: "proxima-nova", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1 } .people-bios h6 { text-transform: uppercase; font-size: 1em; letter-spacing: .1rem; margin-bottom: 0; line-height: 1; } p.cinfo { font-size: 1.1em; margin-bottom: 2rem } p.cinfo a { color: #e57a3c; } ul.peoplepager { width: 100%; } ul.peoplepager li { float: left; width: 47%; margin-right: 3%; border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } ul.peoplepager li p { font-size: 10px; line-height: 1.1; } ul.peoplepager li h6 { font-family: "kepler-std",serif; font-weight: 500; color: #6bbea5; margin-bottom: .25rem; line-height: 1; font-size: 1em; } ul.peoplepager li:nth-of-type(2n+0) { margin-right: 0; } ul.peoplepager li a { color: #333; } ul.peoplepager li a:hover, ul.peoplepager li h2:hover { color: #6bbea5 } footer { background: #f5f5f5; width: 100%; height: 20%; padding: 1em 0 0 0; color: #333; } footer h3 { margin-bottom: .25em; color: #333; } .footernav { margin-top: 1em; } .menu-footer-nav-container { border-top: 1px #c0a036 solid; font-size: 1rem; padding: 1em 0 0 0; text-transform: uppercase; font-weight: 700; } .menu-footer-nav-container ul { padding-left: 0; } .menu-footer-nav-container ul li { list-style: none; display: inline; margin-right: .5em; } .menu-footer-nav-container ul li a { text-decoration: none; color: #888; } .menu-footer-nav-container ul li a:hover { color: #69b2bf } footer p.numbers { line-height: 2.25em; letter-spacing: .05rem; margin-bottom: .5em} footer p.numbers a { text-decoration: none; color: #333 } footer p.numbers img { margin-bottom: -.3em; } footer p.address a { text-decoration: none; color: #333 } footer p.address { font-size: 80%; line-height: 1.2; margin-bottom: 1em} footer p.address img { float: left } .sec-footer { background: #5e7c89; width: 100%; height: 100%; color: #FFF; padding: .5em 0;} .sec-footer p { margin-bottom: 0; } .sec-footer a { color: #FFF } .sec-footer a:hover { color: #e57a3c } /* ---------------------------------------------------------------------------------------------------------- 03 Media Queries ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* Most mobile */ @media (min-width: 350px) { header .button { display: block; float: right; margin: -2.5em 0 1.5em 0} } /* Larger than mobile */ @media (min-width: 400px) { ul.peoplepager li h6, ul.side-peoplepager li h6 { font-size: 1.1em; } ul.peoplepager li h6, ul.side-peoplepager li p { font-size: 11px; } } /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { header { position: absolute; height: auto; } .mwt-logo { max-width: 100%; } header .button { display: inline-block; float: right; margin: 1.25em 0 0 0} .menu-navigation-container { display: block; width: 70%; } .menu-link { display: none } #menu-navigation { display: block; } ul#menu-navigation {float: left; list-style: none; text-transform: uppercase; font-family: "kepler-std",serif; font-weight: 600; font-size: 1.1rem; margin-top: 1em; } ul#menu-navigation li { display: inline-block; line-height: 1; } ul#menu-navigation li a, ul#menu-navigation li a:visited { color: #333; text-decoration: none } ul#menu-navigation li a:hover, ul#menu-navigation li a:focus { color: #69b2bf } ul#menu-navigation li.sfHover a { color: #69b2bf } ul#menu-navigation li:last-child a { padding-right: 0; } ul#menu-navigation ul.sub-menu { background: #69b2bf; line-height: 1.25em; font-size: 1.15rem} ul#menu-navigation ul.sub-menu li { display: inline-block; margin: 0; padding: 1.25em 2em 0 1.5em; letter-spacing: .05rem } ul#menu-navigation ul.sub-menu li:nth-of-type(2) { background: #51a6b5; margin-left: -5px;} ul#menu-navigation ul.sub-menu li:nth-of-type(3) { background: #4492a0; margin-left: -5px; } ul#menu-navigation ul.sub-menu li:nth-of-type(4) { background: #3a7c88; margin-left: -5px; } ul#menu-navigation ul.sub-menu li:nth-of-type(5) { background: #306770; margin-left: -5px; } ul#menu-navigation ul.sub-menu li:hover { background: #265158; } ul#menu-navigation ul.sub-menu li a { color: #FFF; border-top: 2px #6bbea5 solid; padding: .75em 0em 1.5em 0em; } ul#menu-navigation ul.sub-menu li a:hover { color: #FFF } .home .container { position: relative; top: 50%;transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } ul.homelinks li { width: 32%; float: left; list-style: none } .sec-header { height: 400px; } .sec-header .container { position: relative; top: 70%; transform: translateY(-70%); -ms-transform: translateY(-70%); -webkit-transform: translateY(-70%); } ul.side-icons-nav { display: block; list-style: none; padding-left: 0; } ul.side-icons-nav li { display: block; height: 100%; font-size: .8em; border-bottom: 1px #DDD solid; padding-bottom: 0em; margin-bottom: 0em; line-height: 1.2; } ul.side-icons-nav img { display: none } ul.side-icons-nav h6 {font-family: "kepler-std",serif; font-weight: 500; color: #6bbea5; margin-bottom: 0; text-transform: uppercase; line-height: 1em } ul.side-icons-nav li:nth-child(2) h6 { color: #436b7d } ul.side-icons-nav li:nth-child(3) h6 { color: #e57a3c } ul.side-icons-nav li a { text-decoration: none; color: #333; display: block; height: 100%; padding: 1.5em 0 0 0; } ul.side-icons-nav li a img { margin-bottom: 1em } ul.side-icons-nav h6 { font-size: 1.5rem } ul.peoplepager li h6, ul.side-peoplepager li h6 { font-size: 1.1em; } footer p.numbers, footer p.address { font-size: .75em } footer p.numbers img { margin-bottom: -.4em; } footer p.address img { margin-bottom: 1em } } /* Larger than tablet */ @media (min-width: 750px) { html, body { height: 100%; } header { height: 13%; max-height: 95px} .menu-navigation-container { display: block; width: 79%; } ul#menu-navigation { font-size: 1.25rem } .sec-header { height: 75%; max-height: 425px; } ul.side-icons-nav img { display: inline-block; float: left; } ul.side-icons-nav li a { padding: 1.5em 1em 0em 1em; } ul.side-icons-nav li a:hover { background: #EEE; } footer { background: #f5f5f5; width: 100%; height: 30%; max-height: 150px; } .menu-footer-nav-container { font-size: 1.1rem; } .sec-footer { max-height: 20px; } } /* Larger than desktop */ @media (min-width: 1000px) { .menu-navigation-container { display: block; width: 100%; margin-top: 2.2rem} ul#menu-navigation { font-size: 1.05rem; } .sf-arrows .sf-with-ul { padding-right: 2.1em !important } .home { height: 75%; width: 100%; } ul.peoplepager li { width: 30%; } ul.peoplepager li:nth-of-type(2n+0) { margin-right: 3%; } ul.peoplepager li:nth-of-type(3n+0) { margin-right: 0; } ul.peoplepager li h6, ul.side-peoplepager li h6 { font-size: 1.1em; } ul.peoplepager li p, ul.side-peoplepager li p { font-size: 12px; } ul.side-icons-nav li a img { margin-bottom: 2em } footer p.numbers { font-size: 1em } footer p.address { font-size: 1em } } /* Larger than Desktop HD */ @media (min-width: 1200px) { header { max-height: 130px; height: 14%; min-height: 120px; } .menu-navigation-container { display: block; } ul#menu-navigation { font-size: 1.2rem; } .sf-arrows .sf-with-ul { padding-right: 2.25em !important } .sec-header { max-height: 425px; } ul.side-icons-nav h6 { font-size: 1.47rem } } @media (min-width: 1366px) { ul#menu-navigation { font-size: 1.4rem; } ul.side-icons-nav h6 { font-size: 1.75rem } }