section { margin: 0px; } .header-text { position: absolute; top: 10%; left: 6%; color: white; text-shadow: 1px 1px 5px black; } .header-text p { font-size: 1.6rem; } .header-text h1 { font-size: 3rem; } .header-text hr { margin: 40px 0px 40px 0px; max-width: 100px; } .header-text .logo_en { width: 300px; -webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.9)); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.9)); } .header-text .slogan_en { -webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.8)); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.8)); } .column { flex: 1; display: flex; flex-direction: column; } .game-box { padding: 30px 0; max-width: 100%; width: 100%; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .game-box p img { max-width: 70%; } .game-box p .logo { max-width: 70%; } .game-box .container { /*min-height: 200px;*/ } .game-box p.store-link img { max-width: 150px; } @media screen and (orientation: landscape) { .gap { width: 100%; height: 50%; -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; } } .timeline { line-height: 1.4em; list-style: none; margin: 0; padding: 0; width: 100%; } .timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 { /* line-height: inherit; */ } /*----- TIMELINE ITEM -----*/ .timeline-item { padding-left: 40px; position: relative; } .timeline-item:last-child { padding-bottom: 0; } /*----- TIMELINE INFO -----*/ .timeline-info { font-size: 12px; font-weight: 700; letter-spacing: 3px; margin: 0 0 0.5em 0; text-transform: uppercase; white-space: nowrap; } /*----- TIMELINE MARKER -----*/ .timeline-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 15px; } .timeline-marker:before { background: #ff6b6b; border: 3px solid transparent; border-radius: 100%; content: ''; display: block; height: 15px; position: absolute; top: 4px; left: 0; width: 15px; transition: background 0.3s ease-in-out, border 0.3s ease-in-out; } .timeline-marker:after { content: ''; width: 3px; background: #ccd5db; display: block; position: absolute; top: 24px; bottom: 0; left: 6px; } .timeline-item:last-child .timeline-marker:after { content: none; } .timeline-item:not(.period):hover .timeline-marker:before { background: transparent; border: 3px solid #ff6b6b; } /*----- TIMELINE CONTENT -----*/ .timeline-content { padding-bottom: 40px; } .timeline-content p:last-child { margin-bottom: 0; } /*----- TIMELINE PERIOD -----*/ .period { padding: 0; } .period .timeline-info { display: none; } .period .timeline-marker:before { background: transparent; content: ''; width: 15px; height: auto; border: none; border-radius: 0; top: 0; bottom: 30px; position: absolute; border-top: 3px solid #ccd5db; border-bottom: 3px solid #ccd5db; } .period .timeline-marker:after { content: ''; height: 32px; top: auto; } .period .timeline-content { padding: 40px 0 70px; } .period .timeline-title { margin: 0; } /*---------------------------------------------- MOD: TIMELINE SPLIT ----------------------------------------------*/ @media (min-width: 768px) { .timeline-split .timeline, .timeline-centered .timeline { display: table; } .timeline-split .timeline-item, .timeline-centered .timeline-item { display: table-row; padding: 0; } .timeline-split .timeline-info, .timeline-centered .timeline-info, .timeline-split .timeline-marker, .timeline-centered .timeline-marker, .timeline-split .timeline-content, .timeline-centered .timeline-content, .timeline-split .period .timeline-info, .timeline-centered .period .timeline-info { display: table-cell; vertical-align: top; } .timeline-split .timeline-marker, .timeline-centered .timeline-marker { position: relative; } .timeline-split .timeline-content, .timeline-centered .timeline-content { padding-left: 30px; } .timeline-split .timeline-info, .timeline-centered .timeline-info { padding-right: 30px; } .timeline-split .period .timeline-title, .timeline-centered .period .timeline-title { position: relative; left: -45px; } } /*---------------------------------------------- MOD: TIMELINE CENTERED ----------------------------------------------*/ @media (min-width: 992px) { .timeline-centered, .timeline-centered .timeline-item, .timeline-centered .timeline-info, .timeline-centered .timeline-marker, .timeline-centered .timeline-content { display: block; margin: 0; padding: 0; } .timeline-centered .timeline-item { padding-bottom: 40px; overflow: hidden; } .timeline-centered .timeline-marker { position: absolute; left: 50%; margin-left: -7.5px; } .timeline-centered .timeline-info, .timeline-centered .timeline-content { width: 50%; } .timeline-centered > .timeline-item:nth-child(odd) .timeline-info { float: left; text-align: right; padding-right: 30px; } .timeline-centered > .timeline-item:nth-child(odd) .timeline-content { float: right; text-align: left; padding-left: 30px; } .timeline-centered > .timeline-item:nth-child(even) .timeline-info { float: right; text-align: left; padding-left: 30px; } .timeline-centered > .timeline-item:nth-child(even) .timeline-content { float: left; text-align: right; padding-right: 30px; } .timeline-centered > .timeline-item.period .timeline-content { float: none; padding: 0; width: 100%; text-align: center; } .timeline-centered .timeline-item.period { padding: 50px 0 90px; } .timeline-centered .period .timeline-marker:after { height: 30px; bottom: 0; top: auto; } .timeline-centered .period .timeline-title { left: auto; } } /*---------------------------------------------- MOD: MARKER OUTLINE ----------------------------------------------*/ .marker-outline .timeline-marker:before { background: transparent; border-color: #ff6b6b; } .marker-outline .timeline-item:hover .timeline-marker:before { background: #ff6b6b; } #office-gallery { max-width: 1000px; padding: 50px 0; } #office-gallery .grid { flex: 0 0 50%; max-width: 50%; position: relative; color: gray; padding: 10px; } #office-gallery .grid img { max-width: 70%; } #office-gallery .caption { padding: 10px; max-width: 70%; display: inline-block; } #office-gallery .row { max-width: 100%; } #contact .card { width: 18rem; display: inline-block; margin: 20px; } #contact .card-subtitle { height: 2.2rem; } #contact .card-text { height: 9rem; } #contact .card-text p { color: gray; font-size: 18px; margin-bottom: 0; margin-top: 10px; line-height: 1.2; } #bottom-bar { width: 100%; height: 80px; background-image: url('../img/bottom.jpg'); text-align: center; line-height: 40px; color: white; text-shadow: 1px 1px 1px black; white-space: nowrap; overflow: hidden; display: flex; flex-direction: column; } #bottom-bar a { color: #fff; position: relative; } #bottom-bar.bottom-cn { height: auto; background: #5f5f5f; font-size: 1em; line-height: 40px; padding: 20px 0px; display: inherit; } #bottom-bar .jgawb::before { content: ''; display: inline-block; width: 20px; height: 23px; background: url(../img/jgawb.jpg) no-repeat; vertical-align: middle; } /*---------------------------------------------- MOD: TIMELINE SPLIT ----------------------------------------------*/ @media screen and (max-width: 768px) { .header-text hr { margin: 10px 0; max-width: 100px; } #office-gallery .caption { max-width: 90%; } .game-box .container { min-height: 400px; } #bottom-bar { white-space: unset; } }