/** * GENERAL STYLING **/ @font-face { font-family: 'Source Sans Pro'; src: url('assets/fonts/SourceSansPro-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: optional; } @font-face { font-family: 'Source Sans Pro'; src: url('assets/fonts/SourceSansPro-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: optional; } @font-face { font-family: 'Source Sans Pro'; src: url('assets/fonts/SourceSansPro-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: optional; } body { min-width: 320px; min-height: 100vh; background: #1e1e1e; font-size: 16px; line-height: 36px; color: #bfbfbf; position: relative; padding-bottom: 53px; font-family: 'Source Sans Pro', Arial, sans-serif; font-weight: 400; } .empty-space-small { display: block; height: 32px; } .empty-space-middle { display: block; height: 64px; } .empty-space-large { display: block; height: 128px; } .sticky-scrolling { top: 0; left: 15px; right: 15px; } img { max-width: 100%; } /** * TEXT STYLING **/ p { margin: 0 0 30px; } hr { margin: 0 0 30px; border-top: 1px solid #666; } /* Links */ a, a:visited { color: #ff9900; text-decoration: none; font-weight: 600; } a:hover, a:focus { color: #ff9900; text-decoration: underline; } /* Inline Text */ .highlight-text { color: #ff9900; font-weight: 600; } /* Buttons */ .vth-button, .vth-button:visited { display: inline-block; text-decoration: none; background: rgba(0, 0, 0, .5); color: #ff9900; border: 1px solid #ff9900; padding: 10px 15px; font-weight: 600; font-size: 18px; line-height: 22px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .vth-button:hover { text-decoration: none; color: #fff; background: #ff9900; } /* Headlines */ h1, .h1, h2, .h2 { color: #ff9900; line-height: 42px; margin-top: 40px; } h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 40px; line-height: 32px; } /* Images */ .content-image { display: block; margin-bottom: 10px; } /** * FOOTER AREA **/ .page-footer { padding-top: 15px; padding-bottom: 15px; font-size: 14px; line-height: 18px; color: #9e9e9e; border-top: 1px solid #303030; background: #1e1e1e; position: absolute; bottom: 0; left: 0; right: 0; } .page-footer p, .page-footer ul { margin: 0; padding: 0; } .footer-copyright a { font-weight: 400; } .footer-menu { padding-top: 2px; padding-bottom: 2px; text-align: right; } .footer-menu ul { list-style: none; display: inline-block; } .footer-menu ul > li { display: inline-block; padding: 0 10px; border-left: 1px solid #9e9e9e; line-height: 14px; } .footer-menu ul > li:first-of-type { border-left: none; padding-left: 0; } .footer-menu ul > li:last-of-type { padding-right: 0; } .footer-menu ul > li > a { color: #9e9e9e; font-weight: 400; } .footer-menu ul > li > ul { display: none; } /** * LANDING PAGE **/ body.landing-page { background-image: url('assets/img/landing-page-background.jpg'); background-repeat: no-repeat; background-position: 50%; background-size: cover; min-height: 100vh; overflow: hidden; } body.landing-page > .container > .row > .col-12 { min-height: calc(100vh - 53px); position: relative; } .landing-page-content-wrap { background: rgba(51, 51, 51, .8); position: absolute; top: 50%; left: 15px; right: 15px; padding: 3px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .landing-page-logo, .landing-page-content { padding-top: 30px; padding-bottom: 30px; } .landing-page-content { background: rgba(0, 0, 0, .5); font-size: 22px; line-height: 38px; font-weight: 300; } .landing-page-content .highlight-text { font-weight: 400; } /** * CONTENT PAGE **/ body.content-page > section { padding-top: 100px; } body.main-page > section:first-of-type { padding-top: 0; } body.main-page > section #section-intro { margin-top: -100px; padding-top: 100px; } body.content-page .sidebar { position: relative; } body.content-page article.page-content { padding-bottom: 64px; } body.content-page .page-content > h1 { margin-top: 0; margin-bottom: 32px; } /** * START PAGE **/ section.hero-image { height: 100vh; background-image: url('assets/img/start-hero-image.jpg'); background-repeat: no-repeat; background-position-x: center; background-position-y: top; background-size: cover; } section.hero-image > .container { height: 100vh; position: relative; } section.hero-image > .container > .hero-image-caption { position: absolute; left: 15px; right: 15px; top: 50%; padding-top: 2px; padding-bottom: 2px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#333333+0,333333+50,333333+100&0+0,0.8+50,0+100 */ background: -moz-linear-gradient(left, rgba(51,51,51,0) 0%, rgba(51,51,51,0.9) 50%, rgba(51,51,51,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 50%,rgba(51,51,51,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(51,51,51,0) 0%,rgba(51,51,51,0.9) 50%,rgba(51,51,51,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00333333', endColorstr='#00333333',GradientType=1 ); /* IE6-9 */ -moz-transform: translateY(-25%); -webkit-transform: translateY(-25%); -o-transform: translateY(-25%); -ms-transform: translateY(-25%); transform: translateY(-25%); } section.hero-image > .container > .hero-image-caption > .hero-image-caption-body { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+50,000000+100&0+0,0.8+50,0+100 */ background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */ } section.hero-image > .container > .hero-image-caption > .hero-image-caption-body > div > div { padding-top: 30px; padding-bottom: 30px; } section.hero-image > .container > .hero-image-caption > .hero-image-caption-body img { margin-top: 10px; } section.hero-image > .container > .hero-image-caption > .hero-image-caption-body p { font-size: 46px; line-height: 68px; text-shadow: 2px 2px 3px #333; color: #fff; font-weight: 300; } section.hero-image > .container > .hero-image-caption > .hero-image-caption-body p .highlight-text { font-weight: 300; } section.hero-image > .container > .hero-image-caption > .hero-image-caption-body p:last-of-type { margin-bottom: 0; } .sticky-scrolling > nav, .sticky-scrolling > nav a { padding: 0; } .sticky-scrolling > nav li { display: block; width: 100%; } ul.sidebar-navigation { list-style: none; padding: 0; margin: 0; } ul.sidebar-navigation > li { position: relative; padding-right: 28px; color: #9e9e9e; font-size: 14px; cursor: pointer; border: 2px solid transparent; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } ul.sidebar-navigation > li:nth-of-type(4), ul.sidebar-navigation > li:nth-of-type(8) { margin-bottom: 30px; } ul.sidebar-navigation > li.active, ul.sidebar-navigation > li:hover { color: #fff; } ul.sidebar-navigation > li > a, ul.sidebar-navigation > li > a:visited { color: #9e9e9e; text-decoration: none; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } ul.sidebar-navigation > li > a:hover, ul.sidebar-navigation > li > a.active { color: #fff; } ul.sidebar-navigation > li > a > span.bullet { content: "\A"; width: 8px; height: 8px; background: #d1d1d1; background: rgba(168,168,168,.3); border: 2px solid transparent; position: absolute; right: 0; top: 15px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } ul.sidebar-navigation > li > a.active > span.bullet, ul.sidebar-navigation > li > a:hover > span.bullet { border: 2px solid #ff9900; top: 13px; right: -2px; background: transparent; width: 12px; height: 12px; -webkit-border-radius: 6px; border-radius: 6px; } .gallery-frame > div { padding-top: 15px; padding-bottom: 15px; } .highlight-box { padding: 10px 15px; background: rgba(0, 0, 0, .5); border: 1px solid #333; } .highlight-box > h2, .highlight-box > h3, .highlight-box > h4, .highlight-box > h5, .highlight-box > h6 { color: #ff9900; margin-top: 0; margin-bottom: 0; line-height: 32px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; } .highlight-box > p:last-of-type { margin-bottom: 0; } .reference-table { color: #bfbfbf; } .team-gallery h3 { text-transform: uppercase; margin-bottom: 15px; } .team-gallery h3:first-of-type { margin-top: 0; } .team-gallery img { margin-bottom: 15px; } form label { display: block; width: 100%; color: #fff; font-weight: 400; } form input, form textarea { width: 100%; border: none; border-bottom: 2px solid #777; background: transparent; padding: 0 0 15px; margin: 15px 0 40px; color: #bfbfbf; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } form textarea { min-height: 100px; } form input:focus, form textarea:focus { outline: none; border-bottom: 2px solid #fff; } form button[type="submit"] { padding: 0 0 15px; color: #fff; color: #fff; font-weight: 400; border: none; border-bottom: 2px solid #ff9900; background: transparent; line-height: 12px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } form button[type="submit"]:hover { padding: 0 10px 15px; } .contact-form-status { margin-top: 30px; padding: 0 15px; border: 2px solid #bfbfbf; } .contact-form-status > p { font-weight: bold; margin: 0; } .contact-form-status.error { border: 2px solid #ff0000; } .contact-form-status.error > p { color: #ff0000; } .contact-form-status.success { border: 2px solid #008000; } .contact-form-status.success > p { color: #008000; } /** * MOBILE NAVIGATION **/ .mobile-navigation { position: fixed; z-index: 99; min-width: 290px; background: rgba(0, 0, 0, .9); } .mobile-navigation .mobile-navigation-header { padding-top: 11px; padding-bottom: 15px; } .mobile-navigation .mobile-navigation-header .mobile-navigation-button { font-size: 20px; position: absolute; right: 15px; top: 10px; cursor: pointer; } .mobile-navigation .mobile-navigation-content { height: 0; overflow: hidden; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .mobile-navigation .mobile-navigation-content.collapsed { height: calc(100vh - 62px); } .mobile-navigation .sticky-scrolling { border-top: 1px solid #66666680; padding: 15px 0; } .mobile-navigation li { text-align: right; } .mobile-navigation li a { display: inline; } /** * PLUGIN CUSTOM STYKING **/ .fancybox { display: block; background: rgba(0, 0, 0, .5); border: 1px solid #333; position: relative; } .fancybox > img { display: block; } .fancybox > .image-overlay { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .75); -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .fancybox:hover > .image-overlay { opacity: 1; } .fancybox > .image-overlay > i.fas { color: #ffffff; font-size: 20px; text-decoration: none; position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }