body { display: grid; grid-template-columns: 23% auto; grid-template-rows: 19% auto 47px; grid-template-areas: "side-bar main-upper" "side-bar main-lower" "side-bar footer"; } /* Overall Grid */ side-bar, main-upper, main-lower, footer { border: 0px solid red; } h4 { text-align: justify; } input, label { font-family: 'Source Sans Pro', sans-serif; } /* Secondary Grid */ .upper-nav, .upper-content { border: 0px solid blue; } /* ----------------------------------------------- */ side-bar { grid-area: side-bar; text-align: center; background: url('../images/RVME Zig-Zag BG - black.png') center; } main-upper { grid-area: main-upper; background: url('../images/stock_1 (blue vignette).png') center; background-size: cover; display: grid; grid-template-rows: 47px auto; grid-template-areas: "upper-nav" "upper-content"; border: 0px solid blue; } main-lower { grid-area: main-lower; padding: 15px; } a:link { color: #999999; font-size: 1em; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.2px; } a:hover, a:active { color: #CCCCCC; font-size: 1em; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.2px; } a .partner-link { color: #CCCCCC; font-size: 1em; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.2px; } .team-member { /*display: grid;*/ /*grid-template-columns: 366px auto;*/ /*grid-template-columns: auto 366px;*/ /*grid-template-areas: "lefty" "righty";*/ /*padding-bottom: 20px;*/ border: 0px solid red; } .upper-content { grid-area: "upper-content"; display: flex; text-align: center; /*justify-content: center;*/ align-items: center; height: 100%; padding-left: 15px; font-family: 'Playfair Display', serif; color: #FFFFFF; font-weight: lighter; /* 100 - 900 */ /*font-size: 3em;*/ font-size: 34px; letter-spacing: 1px; } .righty { grid-area: "righty"; background-color: #FFFFFF; padding-left: 20px; padding-right: 20px; } .lefty { grid-area: "lefty"; background-color: #FFFFFF; max-height: 220px; min-height: 200px; overflow: hidden; border-radius: .5rem; border: 1px solid #DDDDDD; position: relative; margin-top: 5px; margin-bottom: 33px; } .lefty > img { width: 100%; /*height: 100%;*/ position: absolute; /*bottom: 0;*/ top: 0; } .lefty > figcaption { position: absolute; bottom: 0; background-color: rgba(0,0,0,.7); width: 100%; /*height: 20%;*/ height: 35px; } .lefty > figcaption > h3 { color: white; padding: .75rem; font-size: 1.25rem; position: absolute; top: -18px; } .lefty > figcaption > small { color: white; padding: .75rem; font-family: 'Source Sans Pro', sans-serif; /*font-size: 1.25rem;*/ font-size: 16px; position: absolute; bottom: -5px; } /* ----------------------------------------------- */ .investment_nav, .investment_title, .investment_text { font-family: 'Source Sans Pro', sans-serif; } .investment_nav { color: white; text-align: right; margin-right: 12px; padding: 5px; cursor: pointer; } .investment_nav:hover { font-weight: 400; color: orange; } .investment_title { font-size: 25px; margin-bottom: 15px; font-weight: 400; /* 400: normal */ text-decoration: underline; } .investment_text { /* font-weight: lighter;*/ font-weight: 200; /* 200: ligher than normal */ } .team-member { display: grid; grid-template-columns: 366px auto; grid-template-areas: "lefty" "righty"; } /* ************************************************************ */ .modal-window{ /* display:block;*/ display:none; z-index:99;padding-top:50px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4); } .modal-content{margin:auto;background-color:#fff;position:relative;padding:30px;outline:0;width:600px} /* ************************************************************ */