/*------------------------------------------------------------------ Project: Gambit - Portfolio / Photography HTML Template Version: 1.0 Author: AchtungThemes [Table of contents] – Fonts – Preloader – Header – Footer – Page Content – Aside – Timeline – Services – Contact – Clients – Slideshow – Slider Controls – Horizontal Scrollbar – Gallery Sidebar – Justified Grid – Masonry Grid – Spaced Gallery – Thumbnail Gallery – Horizontal Albums – Image & Video Background – 3d Portfolio – Portfolio Item – Portfolio Filter – Portfolio Carousel – Split Slider – Portfolio Title – Fullscreen Carousel – Stories – Project Navigation -------------------------------------------------------------------*/ /* Fonts ===========================*/ /* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../fonts/open-sans-v17-latin-300.eot'); /* IE9 Compat Modes */ src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v17-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans-v17-latin-600.eot'); /* IE9 Compat Modes */ src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('../fonts/open-sans-v17-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v17-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v17-latin-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v17-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v17-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v17-latin-700.eot'); /* IE9 Compat Modes */ src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../fonts/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v17-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* montserrat-100 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; src: url('../fonts/montserrat-v14-latin-100.eot'); /* IE9 Compat Modes */ src: local('Montserrat Thin'), local('Montserrat-Thin'), url('../fonts/montserrat-v14-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-100.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-100.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-200 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url('../fonts/montserrat-v14-latin-200.eot'); /* IE9 Compat Modes */ src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url('../fonts/montserrat-v14-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-200.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-300 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('../fonts/montserrat-v14-latin-300.eot'); /* IE9 Compat Modes */ src: local('Montserrat Light'), local('Montserrat-Light'), url('../fonts/montserrat-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-500 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('../fonts/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */ src: local('Montserrat Medium'), local('Montserrat-Medium'), url('../fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-600 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('../fonts/montserrat-v14-latin-600.eot'); /* IE9 Compat Modes */ src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url('../fonts/montserrat-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-700 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('../fonts/montserrat-v14-latin-700.eot'); /* IE9 Compat Modes */ src: local('Montserrat Bold'), local('Montserrat-Bold'), url('../fonts/montserrat-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-800 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('../fonts/montserrat-v14-latin-800.eot'); /* IE9 Compat Modes */ src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url('../fonts/montserrat-v14-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-800.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-900 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('../fonts/montserrat-v14-latin-900.eot'); /* IE9 Compat Modes */ src: local('Montserrat Black'), local('Montserrat-Black'), url('../fonts/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v14-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* Preloader ===========================*/ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f4f7f9; z-index: 999999; transition: opacity .5s ease; } #preloader:after { content: ''; width: 50px; height: 50px; position: fixed; left: calc(50% - 25px); top: calc(50% - 25px); border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); border-right-color: #000; animation: fa-spin 1.2s infinite; z-index: 100000; } .dark-theme #preloader { background-color: #0e0e0e; } .dark-theme #preloader:after { border: 1px solid rgba(255, 255, 255, 0.2); border-right-color: #fff; } .page-loaded #preloader { opacity: 0; pointer-events: none; } /* Header ===========================*/ #header { height: 80px; background-color: #fff; color: #222; border-bottom: 1px solid rgba(0,0,0, 0.1); display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; width: 100%; position: fixed; top: 0; left: 0; z-index: 99; transition: .3s; } #header.header-transparent, .dark-theme #header, .aside-is-active #header { color: #fff; border-bottom: 1px solid rgba(255,255,255, 0.1); } .dark-theme #header { background-color: #0e0e0e; } #header.header-transparent, .aside-is-active #header { background-color: transparent; } /* sticky header*/ .scrolling-down #header:not(.fixed) { transform: translate3d(0, -80px, 0); } #header.header-transparent:before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; width: 100%; height: 150px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-size: auto 190%; backface-visibility: hidden; transition: opacity .6s; } .aside-is-active #header:before { opacity: 0; } #header .logo { position: relative; display: flex; align-items: center; width: 140px; color: inherit; text-transform: uppercase; font-weight: 700; letter-spacing: .4em; transition: opacity .3s; } #header .logo img { transition: opacity .3s ease; } #header .logo img:nth-child(2) { position: absolute; } #header .logo .logo-light { opacity: 0; } #header.header-transparent .logo .logo-dark, .dark-theme #header .logo .logo-dark, .aside-is-active #header .logo .logo-dark { opacity: 0; } #header.header-transparent .logo .logo-light, .dark-theme #header .logo .logo-light, .aside-is-active #header .logo .logo-light { opacity: 1; } /* menu */ #header ul { list-style: none; margin-bottom: 0; display: flex; } #header ul li { position: relative; } #header ul li a { text-decoration: none; display: block; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; padding: 10px; color: rgba(0, 0, 0, .65); transition: .2s; } #header ul li a:hover, #header ul li a.is-active { color: rgba(0, 0, 0, .75); } #header.header-transparent nav > ul > li > a, .dark-theme #header nav > ul > li > a, .dark-theme.aside-is-active #header nav > ul > li > a { color: rgba(255, 255, 255, .7); } #header.header-transparent nav > ul > li > a:hover, #header.header-transparent nav > ul > li > a.is-active, .dark-theme #header nav > ul > li > a:hover, .dark-theme #header nav > ul > li > a.is-active, .dark-theme.aside-is-active #header nav > ul > li > a:hover, .dark-theme.aside-is-active #header nav > ul > li > a.is-active { color: rgba(255, 255, 255, 1); } .aside-is-active #header nav > ul > li > a { color: rgba(0, 0, 0, .7); } .aside-is-active #header nav > ul > li > a:hover, .aside-is-active #header nav > ul > li > a.is-active { color: rgba(0, 0, 0, 1); } #header nav > ul > li > a:after { content: ''; position: relative; height: 1px; width: 100%; background-color: currentColor; display: block; transform: scaleX(0); transition: .3s; } #header nav > ul > li:hover > a:after, #header nav > ul > li > a.is-active:after { transform: scaleX(1); } .aside-is-active #header nav > ul > li > a:after { background-color: #000; } .dark-theme.aside-is-active #header nav > ul > li > a:after { background-color: #fff; } /* submenu */ #header ul li ul { position: absolute; top: 100%; left: auto; right: 0; min-width: 200px; flex-direction: column; padding: 10px 0; background-color: #fff; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; } #header ul li:hover ul { opacity: 1; visibility: visible; } #header ul li ul li a { color: rgba(0, 0, 0, .75); font-weight: 400; padding: 5px 15px; } #header ul li ul li a:hover { color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, .05); text-indent: 5px; } .dark-theme #header ul li ul { background-color: #191919; border: 1px solid rgba(255, 255, 255, .08); } .dark-theme #header ul li ul li a { color: rgba(255, 255, 255, .75); } .dark-theme #header ul li ul li a:hover { color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, .05); } /* mob menu button */ .mob-menu-btn { width: 55px; height: 55px; line-height: 55px; text-align: center; cursor: pointer; display: none; background-color: rgba(0, 0, 0, .4); } .mob-menu-btn:before { content: "\f0c9"; font-family: FontAwesome; font-size: 22px; } #header.mob-menu-active .mob-menu-btn:before { content: "\f00d"; } @media (max-width: 1024px) { .mob-menu-btn { display: block; } #header nav { opacity: 0; pointer-events: none; transition: opacity .3s; } #header.mob-menu-active nav { opacity: 1; pointer-events: all; } #header nav { position: absolute; top: 80px; left: 0; width: 100%; background-color: #fff; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.2); max-height: calc(100vh - 80px); overflow-y: auto; } .dark-theme #header nav { background-color: #111; } #header ul { flex-direction: column; } #header ul li a { text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .dark-theme #header ul li a { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #header ul li a.is-active { background-color: rgba(0, 0, 0, 0.082); } .dark-theme #header ul li a.is-active { background-color: rgba(255, 255, 255, 0.082); } #header.header-transparent nav > ul > li > a, #header.header-transparent nav > ul > li > a.is-active { color: rgba(0, 0, 0, .7); } #header nav > ul > li > a:after { display: none; } #header ul li ul { position: relative; opacity: 1; visibility: visible; padding: 0; background-color: #f1f1f1; } } /* Footer ===========================*/ .page-footer { padding: 40px 0; background-color: #fdfdfd; border-top: 1px solid rgba(0, 0, 0, 0.1); text-align: center; } .dark-theme .page-footer { background-color: #0e0e0e; } .footer-social-links a { font-weight: 500; margin: 0 8px; color: rgba(0, 0, 0, 0.6); } .dark-theme .footer-social-links a { color: rgba(255, 255, 255, 0.8); } .footer-social-links a:hover { border-bottom: 1px solid; } .footer-social-links.social-icons a:hover { border: 0; } @media (max-width: 992px) { .footer-social-links a { margin: 0 15px; } } /* Page Content ===========================*/ main { min-height: calc(100vh - 138px); transition: transform .6s cubic-bezier(.77, 0, .175, 1), opacity .6s ease; } body.aside-is-active { overflow: hidden; } .aside-is-active main { transform: translate3d(-25%, 0, 0); } .bg-grid, body { background-image: linear-gradient(to right, #eaeaea, transparent 1px), linear-gradient(to bottom, #eaeaea, transparent 1px); background-size: 250px 250px; background-position: center top; } body.dark-theme { background-color: #000; color: #fff; } .dark-theme .bg-grid, body.dark-theme { background-image: linear-gradient(to right, #1a1a1a, transparent 1px), linear-gradient(to bottom, #1a1a1a, transparent 1px); } [data-typed] { color: slateblue; border-bottom: 1px solid; } /* Aside ===========================*/ aside { width: 960px; max-width: 100vw; height: 100vh; position: fixed; right: 0; top: 0; bottom: 0; background-color: #fff; border-left: 1px solid rgb(170, 170, 170); transform: translate3d(100%, 0, 0); transition: transform .6s cubic-bezier(.795,-.035,0,1); z-index: 2; } .aside-is-active aside { transform: translate3d(0, 0, 0); } aside:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0 50px -20px #000; z-index: 11; } .dark-theme aside:before { background-color: #222; } .aside-inner { width: 100%; margin-top: 80px; height: calc(100vh - 80px); overflow-y: auto; overflow-x: hidden; background-color: #fff; } .dark-theme .aside-inner { background-color: #0e0e0e; } .aside-inner::-webkit-scrollbar { width: 8px; background-color: rgb(240, 240, 240); } .aside-inner::-webkit-scrollbar-thumb { background-color: #333; } .aside-inner::-webkit-scrollbar-thumb:hover { background-color: #000; } .dark-theme .aside-inner::-webkit-scrollbar { background-color: rgb(44, 44, 44); } .dark-theme .aside-inner::-webkit-scrollbar-thumb { background-color: #888; } .dark-theme .aside-inner::-webkit-scrollbar-thumb:hover { background-color: #bbb; } aside .background-overlay { position: absolute; right: 0; top: 0; width: 100vw; height: 100vh; background-color: #ffd800; opacity: 0; z-index: -1; transform: translate3d(100%, 0, 0); transition: all .6s ease; } .aside-is-active aside .background-overlay { opacity: .8; transform: translate3d(0, 0, 0); } /* close aside */ .close-aside-btn { position: absolute; left: calc(100vw - 960px); top: 0; width: 80px; height: 80px; z-index: 12; border-right: 1px solid rgba(0, 0, 0, .05); text-align: center; line-height: 80px; font-size: 20px; color: rgba(0, 0, 0, .3); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; } .dark-theme .close-aside-btn { color: rgba(255, 255, 255, 0.4); border-left: 1px solid rgba(255, 255, 255, .06); border-right: 1px solid rgba(255, 255, 255, .06); } .aside-is-active .close-aside-btn { transition: opacity .2s .4s; pointer-events: all; opacity: 1; } .close-aside-btn:before { content: "\f00d"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; } .close-aside-btn:hover { color: rgba(0, 0, 0, .6); } .dark-theme .close-aside-btn:hover { color: rgba(255, 255, 255, .8); } @media (max-width: 1280px) { aside { width: 100vw; } .close-aside-btn { left: 0; } .aside-is-active #header .logo { opacity: 0; } } /* Aside Sections */ aside section { padding: 80px; border-top: 1px solid; border-bottom: 1px solid; border-color: #f1f1f1; } .dark-theme aside section { border-color: rgb(34, 34, 34); } aside section:first-child { border-top: 0; } aside section:last-child { border-bottom: 0; } aside section + section { margin-top: -1px; } @media (max-width: 600px) { aside section { padding: 20px; } } aside section > h1 { line-height: 1; } /* Timeline ===========================*/ #timeline { background-color: #f2f3f3; } .timeline { position: relative; } .timeline:before { content: ''; height: 100%; width: 2px; left: -2px; border-radius: 99px; position: absolute; background-color: rgba(0, 0, 0, 0.1); } .dark-theme .timeline:before { background-color: rgba(255, 255, 255, 0.1); } .timeline-item { padding: 32px 26px; } .timeline-item h5 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .timeline-item h6 { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: rgba(0, 0, 0, 0.3); margin-bottom: 10px; } .dark-theme .timeline-item h6 { color: rgba(255, 255, 255, 0.3); } .timeline-item p { font-size: 15px; } .timeline-item .item-date { position: relative; text-transform: uppercase; font-size: 12px; font-weight: 600; background-color: #000; color: rgba(255, 255, 255, 0.8); display: inline-block; padding: 4px 12px; margin-bottom: 22px; } .dark-theme .timeline-item .item-date { background-color: rgb(48, 48, 48); } /* circle */ .timeline-item .item-date:before { content: ''; position: absolute; width: 10px; height: 10px; left: -32px; top: calc(50% - 5px); border-radius: 50%; background-color: inherit; display: block; } /* triangle */ .timeline-item .item-date:after { content: ''; position: absolute; left: -12px; top: calc(50% - 6px); border: 6px solid transparent; border-right-color: #000; } .dark-theme .timeline-item .item-date:after { border-right-color: rgb(48, 48, 48); } /* Services ===========================*/ #services { background-color: #f2f3f3; } .dark-theme #services { background-color: rgb(20, 20, 20); } .service-item { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.07); } .dark-theme .service-item { background-color: #0e0e0e; } .service-item-details { padding: 12px; } .service-item h6 { font-size: 16px; text-transform: uppercase; font-weight: 700; letter-spacing: .03em; margin-bottom: 12px; } .service-item ul { margin-bottom: 0; } .service-item ul li { list-style: circle; list-style-position: inside; font-size: 13px; color: rgba(0, 0, 0, 0.9); } .dark-theme .service-item ul li { color: rgba(255, 255, 255, 0.3); } .service-item ul li span { font-size: 14px; color: rgba(0, 0, 0, 0.7); } .dark-theme .service-item ul li span { color: rgba(255, 255, 255, 0.7); } /* Nachhaltigkeit ============================*/ #nachhaltigkeit { background-color: #f2f3f3; } /* Contact ===========================*/ .contact-details-holder { min-height: 300px; position: relative; /* margin: 40px 0; */ display: flex; } .map-toggle-btn { position: absolute; right: 0; bottom: 100%; padding: 15px 20px; background-color: #000; color: #fff; font-family: 'montserrat'; text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: .05em; cursor: pointer; } @media (max-width: 768px) { .map-toggle-btn { padding: 6px 12px; font-size: 12px; } } .map-toggle-btn.map-is-visible ~ .contact-detail-boxes { opacity: 0; pointer-events: none; } .map-toggle-btn:before { content: 'Map Link'; } .map-toggle-btn.map-is-visible:before { content: 'Alle Infos'; } .contact-detail-boxes { background-color: rgba(0, 0, 0, 0.85); color: #fff; position: relative; z-index: 1; width: 100%; padding: 50px 30px; transition: opacity .3s ease; } .contact-detail-boxes .row { width: 100%; } .contact-details-holder .google-map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .contact-detail-box { display: flex; align-items: center; margin-bottom: 15px; } .contact-detail-box i { font-size: 18px; /*width: 40px;*/ text-align: center; margin-right: 15px; } .contact-detail-box h6 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0; } .contact-detail-box p { font-size: 15px; margin-bottom: 0; color: rgba(255, 255, 255, 1); } /* social links */ .social-links { margin-top: 20px; } .social-links a { border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.7); font-size: 14px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; transition: all .3s ease; } .social-links a:hover { color: black; border-color: rgba(0, 0, 0, 0.8); } .text-light .social-links a { border: 2px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.7); } .text-light .social-links a:hover { color: white; border-color: rgba(255, 255, 255, 0.8); } /* Clients ===========================*/ #clients { text-align: center; } #clients img { width: 40%; } /* Slideshow ===========================*/ .swiper-slideshow { height: 100vh; background-color: #000; } .swiper-slideshow .swiper-slide:not(.swiper-slide-active) { opacity: 0 !important; } .swiper-slideshow .swiper-slide .slide-background { height: 100%; opacity: 0; transform: scale(1.15); transition: transform 7s cubic-bezier(0, 0, 0, 1), opacity .8s; } .swiper-slideshow .swiper-slide.swiper-slide-active .slide-background { opacity: 1; transform: scale(1); } /* caption */ .swiper-slideshow .slide-caption { position: absolute; bottom: 40px; left: 40px; right: 140px; overflow: hidden; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 14px; letter-spacing: .06em; font-weight: 600; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, .4); } .swiper-slideshow .slide-caption .inner { transform-origin: left top; transform: translateY(100%) rotate(10deg); transition: transform 1s cubic-bezier(.77,0,.175,1) .1s; } .swiper-slideshow .swiper-slide-active .slide-caption .inner { transform: translateY(0) rotate(0); } .swiper-slideshow .slide-caption a { color: currentColor; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .swiper-slideshow .slide-caption a:hover { border-bottom-color: #fff; } /* Slider Controls ===========================*/ .swiper-controls { display: flex; border: 1px solid rgba(255, 255, 255, 0.1); } .swiper-container .swiper-controls { position: absolute; right: 20px; bottom: 40px; z-index: 2; } .swiper-controls .prev-btn, .swiper-controls .next-btn { width: 50px; height: 50px; background-color: #000; cursor: pointer; font-family: 'fontAwesome'; color: rgba(255, 255, 255, 0.6); font-size: 20px; display: flex; align-items: center; justify-content: center; } .swiper-controls .prev-btn:hover, .swiper-controls .next-btn:hover { color: #fff; } .swiper-controls .next-btn { border-left: 1px solid rgba(255, 255, 255, .1); } .swiper-controls .prev-btn:before { content: "\f104"; } .swiper-controls .next-btn:before { content: "\f105"; } .swiper-progress { position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background-color: rgba(255, 255, 255, 0.267); opacity: 0; transition: .3s; } .swiper-progress.autoplay-running { opacity: 1; } .swiper-progress .inner { background-color: #fff; height: 100%; transform: scaleX(0); transform-origin: left; transition-timing-function: linear; } .swiper-progress:not(.fill) .inner { transition-duration: 0s !important; } .swiper-progress.fill .inner { transform: scaleX(1); } @media (max-width: 992px) { .swiper-controls .prev-btn, .swiper-controls .next-btn { width: 40px; height: 40px; font-size: 18px; } } /* Horizontal Scrollbar ===========================*/ .hr-scrollbar-wrapper { padding-top: 80px; height: 100vh; } .hr-scrollbar-header { height: 200px; padding: 0 40px; text-align: center; display: flex; align-items: center; justify-content: center; } .hr-scrollbar-footer { height: 120px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; } .hr-scrollbar-slider .item-img { height: calc(100vh - 600px); } .hr-scrollbar-slider { overflow: visible; } .hr-scrollbar-slider .swiper-slide { width: auto; overflow: visible; } /* scrollbar style */ .hr-swiper-scrollbar { position: absolute; height: 30px; z-index: 1; left: 50%; transform: translateX(-50%); width: 500px; max-width: calc(100% - 80px); cursor: pointer; } .hr-swiper-scrollbar::before { content: ''; height: 2px; width: 100%; position: absolute; left: 0; top: calc(50% - 1px); background-color: rgb(0, 0, 0, .25); } .dark-theme .hr-swiper-scrollbar::before { background-color: rgb(255, 255, 255, .25); } .swiper-scrollbar-drag { height: 100%; background-color: #000; border-radius: 3px; cursor: move; } .dark-theme .swiper-scrollbar-drag { background-color: #fff; } .swiper-scrollbar-drag::before { content: "\f141"; font-family: 'FontAwesome', sans-serif; display: block; font-size: 16px; line-height: 30px; text-align: center; color: rgba(255, 255, 255, .4); } .dark-theme .swiper-scrollbar-drag::before { color: rgba(0, 0, 0, .4); } @media (max-width: 992px) { .hr-scrollbar-header { height: 125px; } .hr-scrollbar-slider .item-img { height: calc(100vh - 225px); } .hr-scrollbar-footer { height: 60px; } .hr-scrollbar-footer small, .hr-scrollbar-footer .footer-social-links { display: none; } .hr-swiper-scrollbar { height: 20px; } .swiper-scrollbar-drag::before { line-height: 22px; } } /* Gallery Sidebar ===========================*/ .gallery-wrapper { display: flex; width: 100vw; } .gallery-wrapper .gallery-sidebar { height: 100vh; width: 300px; max-width: calc(100% - 60px); position: relative; flex-shrink: 0; border-right: 1px solid rgb(241, 241, 241); z-index: 2; } .dark-theme .gallery-wrapper .gallery-sidebar { border-right: 1px solid rgb(41, 41, 41); } .gallery-wrapper .gallery-sidebar-inner { height: 100vh; width: inherit; position: fixed; padding: 40px; padding-top: 200px; } .gallery-wrapper .sidebar-footer { position: absolute; left: 40px; bottom: 40px; } .sidebar-footer .footer-social-links { margin: 5px 0; } .sidebar-footer .footer-social-links a:first-child { margin-left: 0; } .sidebar-footer small { font-size: 11px; } /* mobile sidebar */ .mob-sidebar-handle { position: absolute; top: 200px; right: -40px; width: 40px; height: 40px; display: none; align-items: center; justify-content: center; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.13); border-left: 0; cursor: pointer; } .mob-sidebar-handle:before { content: '\f0b0'; font-family: 'FontAwesome'; font-size: 18px; } .gallery-sidebar.is-active .mob-sidebar-handle:before { content: '\f00d'; } @media (max-width: 1024px) { .mob-sidebar-handle { display: flex; } .gallery-wrapper .gallery-sidebar { position: fixed; left: 0; background-color: #fff; transform: translate3d(-100%, 0, 0); transition: .3s; } .dark-theme .gallery-wrapper .gallery-sidebar { background-color: #000; } .dark-theme .mob-sidebar-handle { background-color: #000; } .gallery-wrapper .gallery-sidebar-inner { width: 100%; } .gallery-wrapper .gallery-sidebar.is-active { transform: translate3d(0, 0, 0); } } .gallery-wrapper .gallery-content { flex-grow: 1; max-width: 100%; } .horizontal-gallery-slider { transition: .2s ease; } .horizontal-gallery-slider.filtering-swiper { opacity: .2; } .horizontal-gallery-slider .swiper-slide { position: relative; width: auto; height: 100vh; } .horizontal-gallery-slider .swiper-slide.hidden { display: none; } .horizontal-gallery-slider .swiper-slide img { height: 100%; width: auto; height: calc(100% - 16px); margin: 8px 0 8px 8px; } .horizontal-gallery-slider .swiper-slide:last-child img { margin-right: 8px; } .horizontal-gallery-slider .swiper-slide figcaption { position: absolute; bottom: 40px; left: 40px; right: 150px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); font-size: 13px; font-family: "Courier New", Courier, monospace; } @media (max-width: 992px) { .horizontal-gallery-slider .swiper-slide { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; background-color: #000; } .horizontal-gallery-slider .swiper-slide img { margin: 0; max-height: 100%; max-width: 100%; height: auto; width: auto; } .horizontal-gallery-slider .swiper-slide figcaption { bottom: 50px; } } /* gallery sidebar filter */ .sidebar-filter { list-style: none; display: flex; flex-direction: column; align-items: flex-start; } .sidebar-filter [data-filter] { font-family: 'Montserrat', sans-serif; font-weight: 500; letter-spacing: .1em; margin-bottom: .5em; font-size: 14px; text-transform: uppercase; cursor: pointer; opacity: .6; } .sidebar-filter [data-filter]:hover { opacity: 1; } .sidebar-filter [data-filter]::after { content: ''; display: block; width: 100%; height: 1px; background-color: #000; transform: scaleX(0); transform-origin: left; transition: .2s; } .dark-theme .sidebar-filter [data-filter]::after { background-color: #fff; } .sidebar-filter [data-filter].is-active { opacity: 1; } .sidebar-filter [data-filter].is-active::after { transform: scaleX(1); } /* filterable swiper lazy load */ .horizontal-gallery-slider .swiper-slide { position: relative; } .horizontal-gallery-slider .swiper-slide img { opacity: 1; transition: opacity .6s; } .horizontal-gallery-slider [data-src]:not([src]) { width: 0; height: 0; font-size: 0; opacity: 0; } .horizontal-gallery-slider .swiper-slide:not(.loaded):before { content: ''; width: 600px; height: calc(100% - 16px); display: block; margin: 8px 0 8px 8px; background-color: rgba(241, 242, 243, .6); } .horizontal-gallery-slider .swiper-slide:last-child:not(.loaded):before { margin-right: 8px; } .dark-theme .horizontal-gallery-slider .swiper-slide:not(.loaded):before { background-color: rgba(255, 255, 255, 0.15); } .horizontal-gallery-slider .swiper-slide:not(.loaded):after { content: ''; position: absolute; top: calc(50% - 15px); left: calc(50% - 15px); width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .2); border-top-color: rgba(0, 0, 0, .8); animation: spin 1s infinite; } .dark-theme .horizontal-gallery-slider .swiper-slide:not(.loaded):after { border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: rgba(255, 255, 255, 0.8); } @keyframes spin { to {transform: rotate(360deg)} } /* Justified Grid ===========================*/ .justified-grid a img { filter: saturate(0); transition: filter .2s; will-change: filter; backface-visibility: hidden; } .justified-grid a:hover img { filter: saturate(1.2); } /* Masonry Grid ===========================*/ .masonry-grid figure { background-color: #000; overflow: hidden; } .masonry-grid a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: .3s; } .masonry-grid a:hover { opacity: .7; transform: scale(1.1); } /* Spaced Gallery ===========================*/ .spaced-gallery { display: flex; flex-wrap: wrap; align-items: center; } .spaced-gallery-item { width: calc(100% / 3); padding: 60px; opacity: 0; transform: translate3d(0, 100px, 0); transition: opacity .3s, transform .6s; } @media (max-width: 1180px) { .spaced-gallery-item { width: 50%; } } @media (max-width: 730px) { .spaced-gallery-item { width: 100%; } } @media (max-width: 500px) { .spaced-gallery-item { padding: 0; padding-bottom: 60px; } } .spaced-gallery-item.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .spaced-gallery a { display: block; position: relative; transition: .3s; } .spaced-gallery a:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 25px 50px rgba(0, 0, 0, .45); } .spaced-gallery a span { position: absolute; left: 0; bottom: -26px; font-family: "Courier New", Courier, monospace; color: #000; font-size: 14px; transition: .3s; } .dark-theme .spaced-gallery a span { color: #fff; } .spaced-gallery a:hover span { transform: translate3d(0, 3px, 0); } /* Thumbnail Gallery ===========================*/ .thumbnail-gallery-wrapper { position: relative; height: 100vh; width: 100vw; overflow: hidden; } .thumbnail-gallery-wrapper .full-images { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; border-bottom: 1px solid #282828; box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.7); z-index: 2; transition: .3s; } .thumbnail-gallery-wrapper.thumbs-visible .full-images { height: calc(100vh - 130px); } .thumbnail-gallery-wrapper .full-images .swiper-container { height: 100%; background-color: #000; } .thumbnail-gallery-wrapper .full-images .swiper-slide { background-size: contain; height: 100%; } .thumbnail-gallery-wrapper .full-images .swiper-slide:not(.swiper-slide-active) { transition: 0ms !important; opacity: 0 !important; } .thumbnail-gallery-wrapper .thumbnails { position: absolute; bottom: 0; left: 0; right: 0; height: 130px; background-color: #333; z-index: 1; transform: translate3d(0, 50px, 0); transition: .3s; } @media (max-width: 992px) { .thumbnail-gallery-wrapper .thumbnails { height: 80px; } .thumbnail-gallery-wrapper.thumbs-visible .full-images { height: calc(100vh - 80px); } } .thumbnail-gallery-wrapper.thumbs-visible .thumbnails { transform: translate3d(0, 0, 0); } .thumbnail-gallery-wrapper .thumbnails .swiper-container { height: 100%; } .thumbnail-gallery-wrapper .thumbnails .swiper-slide { width: 200px; height: 100%; cursor: pointer; transition: .3s ease; } @media (max-width: 992px) { .thumbnail-gallery-wrapper .thumbnails .swiper-slide { width: 130px; } } .thumbnail-gallery-wrapper .thumbnails .swiper-slide:hover { opacity: .7; } .thumbnail-gallery-wrapper .thumbnails .swiper-slide.is-active { border: 8px solid #fff; opacity: 1; } /* scrollbar */ .thumbnail-gallery-wrapper .thumbnails .swiper-scrollbar { height: 4px; } .thumbnail-gallery-wrapper .thumbnails .swiper-scrollbar-drag { background-color: #fbfcfd; } /* navigation */ .thumbnail-gallery-wrapper .swiper-controls { bottom: 40px; right: 40px; } /* thumbnails button */ .thumbs-btn { position: absolute; left: 40px; bottom: 40px; margin-bottom: 0; z-index: 2; cursor: pointer; } .thumbs-btn:hover { color: #222 !important; } .thumbs-btn:after { content: 'show thumbnails'; } .thumbs-visible .thumbs-btn:after { content: 'hide thumbnails'; } /* Horizontal Albums ===========================*/ .horizontal-album { margin-bottom: 100px; } .horizontal-album .album-title { padding: 0 40px; margin-bottom: 15px; font-size: 15px; color: #222; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .dark-theme .horizontal-album .album-title { color: rgba(255, 255, 255, 0.6); } .horizontal-album .swiper-slide { background-color: #000; position: relative; overflow: hidden; backface-visibility: hidden; transform: translateZ(0); } .horizontal-album .swiper-slide a { width: 320px; height: 200px; background-size: cover; background-position: center; backface-visibility: hidden; transform: translateZ(0); transition: .3s; } @media (max-width: 992px) { .horizontal-album .swiper-slide a { width: 160px; height: 100px; } } .horizontal-album .swiper-slide a:hover { transform: scale(1.1) translateZ(0); opacity: .6; } .horizontal-album .swiper-scrollbar { height: 4px; transition: .2s !important; } .horizontal-album .swiper-scrollbar:hover, .horizontal-album .swiper-scrollbar:active { height: 10px; } .horizontal-album .swiper-scrollbar-drag { background-color: #fff; border-radius: 999px; } /* Image & Video Background ===========================*/ .media-background { height: 100vh; color: white; display: flex; align-items: flex-end; } .media-background .video-bg-wrapper { position: absolute; } .media-background-caption { padding: 100px; width: 100%; text-align: center; } .media-background-caption h3 { font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.68); } @media (max-width: 992px) { .media-background-caption { padding: 40px; } .media-background-caption h1 { font-size: 30px; } } /* 3d Portfolio ===========================*/ .object-3d figcaption > * { backface-visibility: hidden; transition: .2s; } .object-3d:hover .item-link, .object-3d:hover figcaption > * { transform: translateY(-10px) translateZ(40px); } .object-3d:hover figcaption::after { transform: translate3d(-50%, -50%, 0) translateZ(40px); } .object-3d .item-img-shadow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: blur(40px); z-index: -1; } .dark-theme .object-3d .item-img-shadow { opacity: .5; } /* Portfolio Item ===========================*/ .portfolio-item { position: relative; } .portfolio-item figcaption { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; color: #fff; padding: 20px 30px; display: flex; flex-direction: column; justify-content: flex-end; z-index: 0; transition: .15s; } .portfolio-item figcaption:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); width: 64px; height: 64px; opacity: 0; transition: .15s; background-size: contain; background-repeat: no-repeat; } .portfolio-item:hover figcaption { background-color: rgba(0, 0, 0, 0.473); box-shadow: 0 30px 50px rgba(0, 0, 0, .2); } .image-item figcaption:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABblBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+DpEQuAAAAeXRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFxgZGhwgIiMoKi0xMjU3ODw9PkBERUlKTU5RUlRVVllfYmZna294e3x+f4KDiImLjI6RkpWXmJqbnZ6goqOlpqirsrW3ubq+wMPFyMrOz9HT1dfa3uDi5ujp6+3v8fP19/n9OFl1kwAAAhZJREFUWMPt1tl30lAQwOG5IV2QolhrW8SqdV9wqSjWfaNuQFtta61bxY1KFQtl+/33PrAlISwmnKMPzNM9J8mXc3NnJiPiNsLu4qDgLsL9AMLO9z8A/hrQLm7kM7FDjoFgtnpyD5QzYKQIzy9Hv8NjZ0CC3SkRkYcQcgKMwUkREVEZFpwAx8FTXc2TcQKcgdrqEgUnwAz4qqsFNrsA6oRdEpRJVk8Top0BtcIVG+E6xPeKdixHeaQzEAc7QS3XWkAp1DkPYrBjK8hcCeBtoHMq34Nb+kd7QZs5d2q8SzHdhrsi+ieYc1SNN+CJiIie6kloASKwWK21oS+9CFYgDOv1Wh3+1oNgAU7De61ZvlvdBTMwCyndcHX0B1y1PBEYbQ8cgfSw6bI3YxUOF823GIFQhW2v5X17fpqFs8DXIXsgWOa3v2WPvl9GYR6Az7odMFGkMG7zlfxZiNRq4Smk/C9gU28FAnnKU7bfed9OTdA3YM0jKg4fPFZgLEsl1Oak9uchIuJLw30lIioB7zQz4N2Go23P+sAuRIK55laS8EYzAne26g3XPiYKAJXZRmNYbCRsY8C40DHfJouQmza0liVYVUbgWpeMnS6lfabm9BKWVRO42bXqJnVLe3sFCVUHYg7+62oFnrmaD9QqxFwNGGoNHrmaUNRrt2OeWq8BS07H3Gi/JtXBqDsABkCfgOR5x/F/lPM/jz8RfcjfjL6/nwAAAABJRU5ErkJggg==); } .video-item figcaption:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABp1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9dxUMaAAAAjHRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFxgaGx0eHyAhIiMkJikqKy0vMTM0NTc4OTo8PT9AQUNFR0lKS01RUlVXWFtcXV5fYWJkZ2hpbG1wcXV4e35/goOIi4yOkZWXmpueoKOlqKuvsLS3ubzAwcPFx8jKzM7P0dPV2drc3uLk5ujp6+3v8fP19/n7/UHDYCgAAAH9SURBVFjDxdfpV4xxGMbx63lmpqaaFIYWIhFFyJItyi5ryRJSkqJIso2S9nWa7x/tjTfO6cWc63GO3x/wOee33fd1S/9ixR8mIgKsngmiAfBtT0QA+ksiAuRuhhGAw3PA3BEfUHgL4P0OG5BKXgE8KbABae93YL01sAEFZ1eByTobkBLdAIOlNiBtHwG4G7MBqWEGWDzuAwqv5YCPlTYgFfcBPEvagLT7C5BtC2xAalkBput9QPEugOFyG5C2vQPojNuAdOgXsHzaBxRe3gA+77IBqagX4GWRDUjVE0DuamgD0qllYKbBBxTvBBhJ24BUPgzQnbABqf4nsHousAEFbVkgU2sDUvI5wEDKBqTKcYCO0Aak5kVgvskHajLAxpXABIr7AXqLzC2EN3LARLV7iI2zwNJJ9xrTowAP4uZDSjwCGCozn3Jwfg2YOuB+ptoMkL0UmN85NQDQU2gWlLADYKzCLWlN88DCUbeo7vwAcDtmlvWCpwCvU2ZjCVrXgR/73NZWNwmsXcijP28KlA4CPM4rx28CxO4AjKbdgHFsAZhtdCNOxRiQu55/9P4bKOwB6Cs2Y15wMQt8rXGD5v4pYKXFjbplQwBdcXlA7D7A261u3D+xBEwfdAeOqk/ARrs3/f0ZuniRlCIA41WRxr7F5miD572YogBvtui/rd+xdwg2GIRKFgAAAABJRU5ErkJggg==); } .gallery-item figcaption:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAFVBMVEUAAAD///////////////////////9Iz20EAAAABnRSTlMAAQIGCw+OCV5CAAAAVklEQVRIx2NgGBaA2RgnMAArMEvDCZKJVJCAy3K24aZADV9YEKcgBVd0mEEVJOJxx6iCUQWjCmiiAJRFKVIAKmnD8CkAAbXhoQBfIQZWQKjOIKhgyAMAb9GRHy0bGTEAAAAASUVORK5CYII=); } .project-item figcaption:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAt1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8QiqlJAAAAPHRSTlMAAQIDBAUGBwkKDA4QFBUWFyEmKy0zNTc+QkVGS01OUVJWW2JoaXl7gpSXmre8wMPFx87R1dng4ujr7/HCe66XAAABFUlEQVRYw+3Xa1OCQBQGYBYQE7UEL1lplkqlolZ0oXz//+9yhhwnYJc9gNMMzb6fljm7DwPn8AFNywyr6VqJDHwA22HR42yFn6xrxYAVwktTM3sBXliR8118N6KFEWBSBFjg5rBy8SbbDG6ah6rOL1tSoJ5djgPnVjK/dkjK0Q4r1cQYYHOeOhtw3mPAVz8ncAc8d45XrTUwzwWMAC82PLfALAfQBqaJG/aBLhlgr1imXpqHT0YFrhFyPuINxlTgA1ecaXWwYzTgAqL0aMBYCDzSAN0UxcgxidIo4L8D974oTzTgQTjKPg2wbFHOVBurA5Seg9JAyxGlo9pY5UH6a8CdJKPaqAAF0IH0X5UklN8+SU4E7AF3KqfU83/lAAAAAABJRU5ErkJggg==); } .link-item figcaption:after { background-image: url("../img/icon-link.png"); } .portfolio-item:hover figcaption:after { opacity: .6; } .portfolio-item figcaption .item-title { font-size: 18px; text-transform: uppercase; letter-spacing: .02em; } .portfolio-item figcaption p { font-family: arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.75); } .portfolio-item figcaption:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); z-index: -1; } .portfolio-item .item-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .animate-items .portfolio-item .inner { opacity: 0; transform: translate3d(0, 100px, 0); transition: opacity .3s, transform .6s; } .animate-items .portfolio-item.is-visible .inner { opacity: 1; transform: translate3d(0, 0, 0); } /* Portfolio Filter ===========================*/ .portfolio-filter { display: flex; flex-wrap: wrap; height: 100px; align-items: center; align-content: center; } .portfolio-filter [data-filter] { font-size: 12px; letter-spacing: .05em; font-weight: 600; font-family: 'montserrat', sans-serif; opacity: .6; text-transform: uppercase; border-bottom: 1px solid transparent; position: relative; margin-right: 30px; margin-bottom: 10px; cursor: pointer; user-select: none; transition: .25s; } .portfolio-filter [data-filter]:hover { opacity: 1; } .portfolio-filter [data-filter].is-active { opacity: 1; border-color: currentColor; } @media (max-width: 992px) { .portfolio-filter [data-filter] { margin-right: 14px; } } /* Portfolio Carousel ===========================*/ .portfolio-carousel .swiper-slide { height: calc(100vh - 330px); } .portfolio-carousel { transition: opacity .2s ease; } .portfolio-carousel.filtering-swiper { opacity: .2; } .portfolio-carousel .swiper-slide.hidden { display: none; } .portfolio-carousel .portfolio-item .inner { width: 100%; height: 100%; } .portfolio-carousel .portfolio-item .item-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* animate */ .portfolio-carousel .portfolio-item .inner { opacity: 0; transform: translate3d(100px, 0, 0); transition: transform 1.2s ease, opacity .9s; } .page-loaded .portfolio-carousel .portfolio-item .inner { opacity: 1; transform: translate3d(0, 0, 0); } .portfolio-carousel-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6rem; } /* controls */ .portfolio-carousel-controls.swiper-controls { position: absolute; left: 50%; transform: translateX(-50%); } @media (max-width: 992px) { .portfolio-carousel .swiper-slide { height: calc(100vh - 300px); } .portfolio-carousel-footer { margin-top: 3.5rem; } .portfolio-carousel-footer small { display: none; } .portfolio-carousel-controls.swiper-controls { position: static; transform: none; } .portfolio-carousel-footer .footer-social-links { padding-left: 20px; text-align: right; } } /* Split Slider ===========================*/ .split-slider .swiper-slide { height: 100vh; } .split-slider .swiper-slide [data-background] { height: 100%; position: absolute; right: 0; width: 50%; } .split-slider .swiper-slide:not(.swiper-slide-active) { opacity: 0 !important; } .split-slider .swiper-slide .split-caption { position: relative; width: 50%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 20px; z-index: 1; } .split-slider .swiper-slide .split-caption h1 { font-size: 4.8vw; transition-delay: 100ms; font-family: Open sans; sans-serif; text-transform: uppercase; font-weight: 400; } .split-slider .swiper-slide .split-caption p { max-width: 35em; margin-top: 20px; padding-left: 10px; transition-delay: 300ms; } .split-slider .swiper-slide .split-caption a { color: #000; padding-left: 10px; padding-top: 20px; transition-delay: 400ms; } .dark-theme .split-slider .swiper-slide .split-caption a { color: #fff; } .split-slider .swiper-slide .split-caption a:before { content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 30px; height: 1px; background-color: currentColor; transition: .2s; } .split-slider .swiper-slide .split-caption a:hover:before { width: 50px; } .split-slider .swiper-slide h1, .split-slider .swiper-slide p, .split-slider .swiper-slide a { opacity: 0; transform: translate3d(10px, 10px, 0); transition: .4s ease; } .split-slider .swiper-slide-active h1, .split-slider .swiper-slide-active p, .split-slider .swiper-slide-active a { opacity: 1; transform: translate3d(0, 0, 0); } .split-slider-footer { position: absolute; left: 20px; bottom: 40px; z-index: 1; } .split-slider-footer a { font-weight: bold; } @media (max-width: 992px) { .split-slider .swiper-slide [data-background], .split-slider .swiper-slide .split-caption { width: 100%; } .split-slider .swiper-slide .split-caption { background-color: rgba(0, 0, 0, .4); } .split-slider .swiper-slide .split-caption p { display: none; } .split-slider .swiper-slide .split-caption h1, .split-slider .swiper-slide .split-caption a { color: #fff; } .split-slider .swiper-slide .split-caption h1 { font-size: 38px; } .split-slider-footer small { display: none; } .split-slider-footer a { color: white; } } /* Portfolio Title ===========================*/ .portfolio-title .inner { box-shadow: 0 30px 50px rgba(0, 0, 0, .14); background-color: #fbfbfb; padding: 50px 60px; } .dark-theme .portfolio-title .inner { background-color: #0e0e0e; } @media (max-width: 992px) { .portfolio-title h2 { font-size: 26px; } .portfolio-title h3 { font-size: 18px; line-height: 24px; } } .negative-margin { margin-top: -200px; } /* Fullscreen Carousel ===========================*/ .fullscreen-carousel { background-color: #fff; border: 5px solid transparent; height: 100vh; } .dark-theme .fullscreen-carousel { background-color: #000; } .fullscreen-carousel .swiper-slide { height: 100%; } .fullscreen-carousel .swiper-slide .inner, .fullscreen-carousel .swiper-slide .item-img { width: 100%; height: 100%; } .fullscreen-carousel .swiper-slide figcaption { padding-right: 150px; } .swiper-container .fullscreen-carousel-controls { border: 1px solid rgba(255, 255, 255, 0.1); position: absolute; right: 32px; bottom: 32px; z-index: 1; } /* Stories ===========================*/ .blog-list { width: 800px; max-width: 100%; margin: auto; margin-top: 64px; } .blog-list article:not(:first-child) { margin-top: 110px; } .blog-list article .img { position: relative; overflow: hidden; } .blog-list article .img-inner { padding-bottom: 56.25%; transition: .3s; } .blog-list article a:hover .img-inner { transform: scale(1.05); } .blog-list article a { color: #222; } .dark-theme .blog-list article a { color: #fff; } .blog-list article p, .blog-list article h3 { margin-left: 70px; } .blog-list article p { margin-top: 20px; font-weight: 600; color: rgba(0, 0, 0, 0.4); text-transform: uppercase; font-size: 14px; } .dark-theme .blog-list article p { color: rgba(255, 255, 255, 0.45); } .blog-list article h3 { max-width: 25em; } .blog-list article a:hover h3 { text-decoration: underline; } @media (max-width: 992px) { .blog-list article p, .blog-list article h3 { margin-left: 0; } } article.story .story-details h2 { margin-bottom: 30px; } article.story .story-details .img { padding-bottom: 56.25%; } article.story .story-details { margin-bottom: 40px; } article.story p { margin-bottom: 20px; } article.story blockquote { margin: 50px 0; } article.story .grid { margin-top: 50px; } .widget { margin-bottom: 60px; } .widget-title { font-weight: bold; text-transform: uppercase; margin-bottom: 15px; } .widget .list { list-style: none; } .widget .list a { opacity: .5; transition: .2s ease; } .widget .list a:hover { opacity: 1; } .post-comments-wrapper { border: 2px solid rgba(0, 0, 0, .1); margin-top: 100px; padding: 40px; background-color: #fdfdfd; } .post-comments { margin: 50px 0 70px; } .post-comments ul { list-style: none; } .post-comments ul ul { margin-left: 100px; margin-top: 50px; } .post-comment { display: flex; margin-bottom: 50px; } .post-comment .user-avatar { width: 100px; } .post-comment .user-avatar [data-background] { width: 80px; height: 80px; border-radius: 50%; } .post-comment .comment-content { flex: 1; } /* Project Navigation ===========================*/ .page-nav { text-align: center; max-width: 40em; margin: auto; margin-bottom: 120px; } .page-nav h6 { color: #999; } .page-nav a { color: #000; } .dark-theme .page-nav a { color: #fff; } .page-nav a:hover { text-decoration: underline; } .page-nav h1 { text-transform: uppercase; } .page-nav a.disabled { opacity: .15; pointer-events: none; user-select: none; } /* Map ===========================*/ .map-frame { width: auto; height: 100%; overflow: hidden; background: url(../img/map.jpg) no-repeat center; } .map-image { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }