* { font-family: 'Montserrat', sans-serif; } html { height: 100%; } body { margin: 0; color: #000000; height: 100%; font-size: 0.651vw; } h1, h2, h3, h4, h5, h6, p { padding: 0; margin: 0; } .main-wrapper { height: 100%; } .main-left-pane { width: 50%; position: fixed; z-index: 1; display: flex; } .main-right-pane { position: relative; left: 50%; width: 50%; min-height: 100%; display: flex; flex-direction: column; } .title-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 2.5em; margin-bottom: 2.5em; } .title-content { text-align: center; } .title-name { font-size: 6.8em; font-weight: 500; } .title-info { font-weight: 300; font-size: 2.4em; } .nav-wrapper { display: flex; justify-content: center; align-items: center; font-weight: 300; position: relative; } .title-nav { top: 5em; } .nav-link { text-decoration: none; font-size: 2em; padding-top: 5px; padding-bottom: 5px; padding-left: 20px; padding-right: 20px; transition: background-color 0.2s; color: #000000; } .nav-link + .nav-link { border-left: 1px solid #aaaaaa; } .nav-link:hover { background-color: #f5f5f5; } .nav-invert:hover { background-color: #ffffff; } .main-right-content { padding-top: 2.5em; padding-right: 2.5em; padding-bottom: 2.5em; } .tile-wrapper { display: flex; padding-right: 1em; padding-left: 1em; padding-top: 1em; padding-bottom: 1em; transition: background-color 0.2s; } .tile-wrapper:hover { background-color: #f5f5f5; /*cursor: pointer;*/ } .tile-wrapper + .tile-wrapper { border-top: 1px solid #aaaaaa; } .tile-image { width: 10vw; height: 10vw; background-position: center; background-size: cover; margin-right: 2.5em; margin-left: 0px; -webkit-box-shadow: 5px 5px 20px 0px rgba(196,196,196,1); -moz-box-shadow: 5px 5px 20px 0px rgba(196,196,196,1); box-shadow: 5px 5px 20px 0px rgba(196,196,196,1); } #test-image { background-image: url("../images/sample.png"); } .tile-content { display: flex; flex: 1; justify-content: center; position: relative; } .tile-info { transition: opacity 0.2s; display: flex; justify-content: center; position: absolute; flex-direction: column; width: 100%; height: 100%; } .tile-info1 { opacity: 1; pointer-events: auto; } .tile-info2 { opacity: 0; pointer-events: none; } .tile-title { font-size: 3em; font-weight: 500; } .tile-subtitle { font-size: 2em; font-weight: 300; } .tile-more { font-weight: 300; font-size: 2em; } .tile-nav { padding-top: 1.5em; } .spacer { flex: 1; } .copyright-wrapper { font-size: 1.6em; text-align: center; font-weight: 300; padding-bottom: 10px; padding-top: 10px; } @media (min-width: 768px) and (orientation: landscape) { .tile-wrapper:hover .tile-info1 { opacity: 0; pointer-events: none; } .tile-wrapper:hover .tile-info2 { opacity: 1; pointer-events: auto; } } @media (max-width: 768px), (orientation: portrait) { body { font-size: 10px; font-size: 1.5vw; } .main-left-pane { width: 100%; position: relative; z-index: 1; } .main-right-pane { left: 0; width: 100%; } .tile-image { width: 20vw; height: 20vw; } .tile-wrapper:first-child { border-top: 1px solid #aaaaaa; } .active .tile-info1 { opacity: 0; pointer-events: none; } .active .tile-info2 { opacity: 1; pointer-events: auto; } .tile-wrapper:hover { cursor: pointer; } .main-right-content { padding-left: 2.5em; } }