/* Template Name: Split Author: One Page Love Author URI: https://onepagelove.com Template URI: https://onepagelove.com/split Description: Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content. */ /* -- CSS Reset -- */ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,600"); @import url("https://fonts.googleapis.com/css?family=Lora"); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -moz-font-feature-settings: "liga" on; margin: 0; } img.alignright { float: right; } img.alignleft { float: left; } img.aligncenter { clear: both; display: block; margin-right: auto; margin-left: auto; } body { background-color: #FFFFFF; border-style: none; } body, p, a, a:hover { color: #000000; } a, a:hover { text-decoration: none; border: none; border-style: none; box-shadow: none; } /* -- Content -- */ @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } html { background-color: #061C30; } body.page-template-page-fullsingle-split { background-color: #061C30; font-family: "Montserrat", sans-serif; font-weight: 400; font-size: 21px; line-height: 33px; letter-spacing: -0.2px; color: #848d96; animation: fadein 2s; } body.page-template-page-fullsingle-split p { color: #848d96; } .fs-split { width: 100vw; height: 100vh; display: flex; } @media (max-width: 800px) { .fs-split { height: auto; flex-wrap: wrap; } } .fs-split .split-image { width: 50%; height: 100vh; background-size: cover; } @media (max-width: 800px) { .fs-split .split-image { height: 80vh; width: 100%; } } .fs-split .split-content { width: 50%; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: auto; } @media (max-width: 800px) { .fs-split .split-content { width: 100%; height: auto; } } .fs-split .split-content .split-content-vertically-center { padding: 80px; max-width: 640px; margin-top: auto; margin-bottom: auto; } @media (max-width: 1200px) { .fs-split .split-content .split-content-vertically-center { padding: 60px; } } @media (max-width: 800px) { .fs-split .split-content .split-content-vertically-center { padding: 40px; } } .split-intro { font-weight: 600; font-size: 64px; line-height: 80px; letter-spacing: -2px; } .split-intro h1 { font-weight: 400; text-transform: uppercase; font-size: 16px; line-height: 16px; margin-bottom: 40px; letter-spacing: 0.4px; color: #47bec7; } .split-intro .tagline { color: #CCCCCC; } .split-bio { padding: 40px 0 20px 0; font-family: "Lora", serif; } @media (max-width: 1200px) { .split-bio { padding: 30px 0 10px 0; } } @media (max-width: 800px) { .split-bio { padding: 20px 0 0 0; } } .split-bio p { color: #848d96; margin-bottom: 20px; line-height: inherit; } .split-bio a { color: #848d96; transition-duration: 0.5s; border-bottom: 1px dotted #848d96; } .split-bio a:hover { color: #CA486d; transition-duration: 0.1s; border-bottom: 1px dotted #CA486d; } .split-bio em, .split-bio i { font-style: italic; line-height: inherit; } .split-bio strong, .split-bio b { font-weight: bold; line-height: inherit; } .split-bio small { font-size: 80%; line-height: inherit; } .split-bio h1, .split-bio .h1, .split-bio h2, .split-bio .h2, .split-bio h3, .split-bio .h3, .split-bio h4, .split-bio .h4, .split-bio h5, .split-bio .h5, .split-bio h6, .split-bio .h6 { font-style: normal; font-weight: normal; color: inherit; } .split-bio h1 small, .split-bio .h1 small, .split-bio h2 small, .split-bio .h2 small, .split-bio h3 small, .split-bio .h3 small, .split-bio h4 small, .split-bio .h4 small, .split-bio h5 small, .split-bio .h5 small, .split-bio h6 small, .split-bio .h6 small { line-height: 0; } .split-bio h1, .split-bio .h1 { font-size: 1.5em; line-height: inherit; margin-top: 0; margin-bottom: 20px; } .split-bio h2, .split-bio .h2 { font-size: 1.25em; line-height: inherit; margin-top: 0; margin-bottom: 20px; } .split-bio h3, .split-bio .h3 { font-size: 1.1875em; line-height: inherit; margin-top: 0; margin-bottom: 20px; } .split-bio h4, .split-bio .h4 { font-size: 1.125em; line-height: inherit; margin-top: 0; margin-bottom: 20px; } .split-bio h5, .split-bio .h5 { font-size: 1.0625em; line-height: inherit; margin-top: 0; margin-bottom: 20px; } .split-bio h6, .split-bio .h6 { font-size: 1em; line-height: inherit; margin-top: 0; margin-bottom: 20px; } .split-bio ul, .split-bio ol, .split-bio dl { margin-bottom: 20px; list-style-position: outside; line-height: inherit; } .split-bio li { font-size: inherit; } .split-bio ul { margin-left: 2.25em; list-style-type: disc; } .split-bio ol { margin-left: 2.25em; list-style-type: decimal; } .split-bio ul ul, .split-bio ol ul, .split-bio ul ol, .split-bio ol ol { margin-left: 1.25em; margin-bottom: 0; } .split-bio dl dt { margin-bottom: 10px; font-weight: bold; } .split-bio dl dd { margin-bottom: 10px; } .split-lists .split-list { width: 30%; display: inline-block; margin-bottom: 40px; vertical-align: top; } @media (max-width: 500px) { .split-lists .split-list { width: 90%; } } .split-lists .split-list h3 { font-weight: 400; text-transform: uppercase; font-size: 11px; line-height: 11px; margin-bottom: 31px; color: #848d96; letter-spacing: 2px; opacity: 0.5; } .split-lists .split-list ul li { font-size: 16px; line-height: 16px; margin-bottom: 12px; } .split-lists .split-list ul li a { color: #848d96; transition-duration: 0.5s; } .split-lists .split-list ul li a:hover { color: #CA486d; transition-duration: 0.1s; } .split-credit { opacity: 0.4; } .split-credit p { font-size: 12px; line-height: 14px; } .split-credit p a { color: #848d96; } .split-video { overflow: hidden; position: relative; } .video-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .video-container { position: relative; overflow: hidden; height: 56.25vw; width: 100vw; } @media (max-aspect-ratio: 16/9) { .video-container { height: 100vh; width: 177.7777777778vh; } } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } video.video { object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; }