@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&subset=latin-ext); *, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; text-shadow: 1px 1px 1px rgba(0, 0, 0, .004); outline: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } a, img { outline: 0; text-decoration: none; } a { cursor: pointer; color: #b0a319; -webkit-transition: all .1s ease; transition: all .1s ease; } a:hover { color: #b0a319; } b, strong { font-weight: 700 !important; } input { -webkit-border-radius: 0; border-radius: 0; } input, button, textarea { font-family: 'Source Sans Pro', sans-serif; } body, html { width: 100%; margin: 0; padding: 0; } body { font-family: 'Source Sans Pro', sans-serif; font-size: 1.2rem; color: #333e48; background-color: #a4a2a2; } body.white { background-color: #fff; } body.animatedBody { overflow-y: hidden; } .ui-tooltip { width: auto; text-align: center; background-color: #000 !important; box-shadow: none !important; padding: .2rem !important; border: 1px solid #222 !important; } .ui-tooltip-content { position: relative; padding: .2rem; font-weight: 600; font-size: .9rem; opacity: 1 !important; color: #fff; } @media (max-width:1280px) { body { overflow-y: scroll !important; overflow-x: hidden !important; background-color: #f9f9f9; } .ui-tooltip { display: none !important; } } .clearfix { clear: both; display: block; width: 100%; font-weight: 700; } .loading { position: fixed; inset: 0; z-index: 999999; width: 100vw; height: 100vh; background: #343a40; display: flex; align-items: center; justify-content: center; } .loading-logo { width: 260px; max-width: 70vw; animation: heartbeat 1.4s ease-in-out infinite; } @keyframes heartbeat { 0% { transform: scale(1); opacity: .85; } 14% { transform: scale(1.08); opacity: 1; } 28% { transform: scale(1); } 42% { transform: scale(1.08); } 70% { transform: scale(1); opacity: .9; } 100% { transform: scale(1); opacity: .85; } } .loading.is-hidden { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s ease; } #container { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .container { display: block; width: 100%; height: 100vh; padding: 0; position: relative; overflow: hidden; } .container .wrapper { display: block; width: 90%; margin: 0 auto; } @media (max-width:1280px) { #container { width: 100%; height: 100%; margin: 0; padding: 0; overflow-y: auto; } .container { display: block; width: 100%; height: auto; } .container .wrapper { width: 95%; } } header { display: block; width: 100%; margin: 0; padding: 0; -webkit-transition: .1s; transition: .1s; position: fixed; top: 0; z-index: 15; } header.sticky { top: 0; background-color: #2d3236; } header .wrapper { display: block; width: 95%; margin: 0 auto; padding: 1rem 0; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width:1280px) { header { top: 0%; overflow: hidden; } header .wrapper { width: 100%; } header.sticky { background-color: rgba(0, 0, 0, .6); } } .logo { width: 175px; height: 75px; margin: 0 auto; display: block; overflow: hidden; transition: .1s; cursor: pointer; background-image: url(../images/logo_light.png); background-repeat: no-repeat; background-size: 100%; background-position: center; } @media (max-width:1280px) { .logo { width: 100px; height: 2.8rem; } } .topnav { display: block; margin: 0; padding: 0; position: absolute; top: 35%; left: 0; } .topnav ul { margin: 0; padding: 0; } .topnav li { display: block; float: left; position: relative; line-height: 1.2rem; } .topnav li a { display: block; text-align: center; font-size: 1.2rem; padding: 0; color: #fff; } .topnav li i { padding: 0 1rem 0 0; color: #fff; font-size: 1.2rem; } .topnav li:hover a { color: #fff; } .topnav li.language { display: flex; flex-wrap: nowrap; padding: 0; } .topnav li.language a { margin: 0 .6rem 0 0; } .topnav li.language a:hover { opacity: .7; } @media (max-width:1280px) { .topnav { position: absolute; right: 4rem; top: 1.8rem; margin: 0; } .topnav li { display: block; } .topnav li span { display: none; } .topnav li.language { display: flex !important; flex-wrap: nowrap; padding: 0 1rem; } .topnav li.language a { margin: 0 .6rem 0 0; } .topnav li.language a:hover { opacity: .7; } } .toggleMenu { color: #fff !important; z-index: 10000; text-align: center; overflow: hidden; transition: .5s; opacity: 1; display: none; font-family: FontAwesome; margin: 0; font-size: 2rem; position: absolute !important; top: 1.5rem; right: .4rem; z-index: 30; border-radius: 50%; } .toggleMenu:before { content: "\f0c9"; display: block; background-color: #242222; transform: scale(0); width: 3rem; height: 3rem; line-height: 3rem; animation: menu 1s forwards; } .toggleMenu.open:before { content: "\f00d"; background-color: transparent; transform: scale(0); animation: menuOpen 1s forwards; } header.sticky .toggleMenu:before { background-color: #242222; } @media (max-width:1280px) { .toggleMenu { top: .9rem; } } @keyframes menu { to { transform: scale(1); } } @keyframes menuOpen { to { transform: scale(1); } } nav { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; position: fixed; display: none; overflow: hidden; z-index: 29; top: 0; left: 0; overflow-y: auto; background-color: rgba(30, 33, 34, .95); } .nav { width: 40%; margin: 0; padding: 5%; float: left; } .nav:after, .nav:before { content: ""; display: table; } .nav:after { clear: both; } .nav>li { width: 100%; display: block; padding: 0; margin: 0; position: relative; } .nav>li>a.parent:after { color: #1e2122; float: right; font-size: .8rem; position: absolute; right: 1rem; top: .2rem; } .nav li a { display: block; color: #fff; font-size: 2rem; padding: 2rem; text-align: left; font-weight: 300; transition: .3s ease-in-out; } .nav li a i { width: 4rem; transform: translateX(-4rem); visibility: hidden; transition: .5s; } .nav>li>a.parent:after { font-family: FontAwesome; content: "\f107"; color: #fff; float: right; font-size: .8rem; position: absolute; right: 2rem; top: 3rem; } .nav>li:hover>a { box-shadow: inset 50rem 0 4px #b0a319; border-color: #b0a319; color: #111; } .nav li:hover i { width: 4rem; transform: translateX(0); visibility: visible; } .nav li ul { list-style: none; width: 100%; position: static; margin: 0; padding: 0; display: none; } .nav li ul li { border: none; margin: 0; padding: 0; position: relative; } .nav li ul li a { color: #fff; padding: .4rem 2rem; font-weight: 500; height: auto; font-size: 1rem; border-bottom: 0; } .nav li ul li:hover a { box-shadow: inset 50rem 0 4px none; border-color: transparent; color: #b0a319; } .nav li.hover ul { display: block; } .nav_contact { width: 50%; margin: 0; padding: 5%; float: left; font-size: 1.6rem; font-weight: 100; } .nav_contact * { font-size: 1.6rem; font-weight: 100; color: #fff; } @media (max-width:1280px) { .nav { width: 100%; padding: 5% 0; float: none; transform: scale(.8); } .nav_contact { display: none; } } .banner { display: flex; text-align: start; padding: 0; position: sticky; top: 0; color: #fff; } .banner-left, .banner-right { flex-basis: 0; flex-grow: 1; padding: 10% 5%; position: relative; } .banner-left { width: 50%; background-color: #222222; font-weight: 300; position: relative; } .banner-left:after { content: ""; position: absolute; top: 0; z-index: 0; left: 0; width: 100%; height: 100%; clip-path: circle(40% at 50% 50%); transition: .5s; background-image: url(../images/img01.jpg); } .banner-left:hover:after { clip-path: circle(100% at 50% 50%); } .banner-title { position: absolute; left: 0; bottom: 0; z-index: 1; width: 80%; display: block; padding: 2rem; } .banner-title h1 { font-size: 4rem; margin: 0; padding: 0; } .banner-title h2 { font-size: 1.2rem; font-weight: 100; } .banner-logo { height: 50vh; position: absolute; left: 25.16%; top: 22%; z-index: 10; fill: #eee; opacity: .3; } .banner-right { width: 50%; overflow: hidden; position: relative; } .banner-video { width: 100%; height: 100%; overflow: hidden; z-index: 0; transform: scale(2); position: absolute; top: 0; left: 0; border: 0 !important; background: transparent; } #spinner { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-image: url(../images/loading.gif); background-size: 36px; background-repeat: no-repeat; background-position: center center; } @media (max-width:1280px) { .banner { flex-wrap: wrap; } .banner-left, .banner-right { width: 100%; height: 100vh; flex-basis: auto; flex-grow: unset; } .banner-title { bottom: auto; top: 38%; width: 100%; } .banner-title h1 { font-size: 3rem; } .banner-title h2 { font-size: 1.2rem; } .banner-logo { height: 18vh; position: absolute; left: 15%; top: 15%; z-index: 10; fill: #eee; opacity: .3; } .banner-right { display: none; } .banner-video { display: none; } } .scrolldown { position: absolute; left: 96.5%; bottom: 2.5%; z-index: 10; width: 4rem; height: 4rem; line-height: 4rem; margin: 0; text-align: center; overflow: hidden; display: block; padding: 0; background-color: #b0a319; border-radius: 0; color: #333 !important; } .scrolldown.page { left: 50%; margin-left: -2rem; } @media (max-width:1280px) { .scrolldown { position: absolute; left: 50%; margin-left: -2rem; } .scrolldown.page { display: none; } } .page-view { width: 100%; height: 100%; top: 0; position: relative; overflow: hidden; z-index: 0; } .page-view h3 { font-weight: 800; text-transform: uppercase; -webkit-text-stroke: 2px white; -moz-text-stroke: 2px white; color: transparent; font-size: clamp(3rem, 10vw, 6rem); position: absolute; top: 15%; left: 5%; width: 90%; z-index: 10; display: grid; place-items: left; } .page-view p { font-weight: 300; color: #fff; font-size: 1.6rem; position: absolute; top: 35%; left: 5%; width: 70%; z-index: 10; display: grid; place-items: left; } body:not(.no-js) .image-wrap { transition: 1s ease-out; transition-delay: 0.2s; position: relative; width: 100%; height: 100vh; overflow: hidden; visibility: hidden; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } body:not(.no-js) .image-wrap:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6); } body:not(.no-js) .image-wrap img { transform: scale(1.1); transition: 2s ease-out; } body:not(.no-js) .animating .image-wrap { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; transform: skewY(0); } body:not(.no-js) .animating .image-wrap:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); } body:not(.no-js) .animating img { transform: scale(1); transition: 4s ease-out; } .image-wrap img { width: 100%;} body:not(.no-js) .fadeup { opacity: 0; transition: 0.4s ease-out; transform: translateY(40px); } body:not(.no-js) .fading-up { opacity: 1; transition: 1s ease-out; transform: translateY(0); transition-delay: 0.7s; } @media (max-width:1280px) { .page-view { width: 100%; height: auto; padding: 0 1rem; display: block; } .page-view h3 { position: static; font-size: 3rem; margin: 0; padding: 0; width: 100%; color: #111; } .page-view p { position: static; font-size: 1rem; margin: 0; padding: 0; width: 100%; color: #111; } body:not(.no-js) .image-wrap { width: 100%; height: auto; margin: 4rem 0 1rem 0; overflow: hidden; visibility: visible; clip-path: none; } body:not(.no-js) .image-wrap:after { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); } body:not(.no-js) .image-wrap img { width: 100%; vertical-align: bottom; transform: scale(1); } body:not(.no-js) .fadeup { opacity: 1; } body:not(.no-js) .fading-up { opacity: 1; } } .project-button { position: absolute; top: 60%; width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; } .project-button a { display: block; width: 30%; padding: 2rem; margin: .6rem; font-size: 2.6rem; color: #dedede; background-color: #111; transition: .3s; } .project-button a:hover { box-shadow: inset 50rem 0 4px #b0a319; border-color: #b0a319; color: #111; } @media (max-width:1280px) { .project-button { position: static; justify-content: space-between; } .project-button a { width: 48%; padding: 1rem; margin: 0; font-size: 1.2rem; text-align: center; } } .project { display: block; position: absolute; width: 100%; bottom: 0px; right: 0; left: 0; } .project-carousel { margin: 0; padding: 0; list-style: none } .project-carousel .owl-item { padding: 0; margin: 0; position: relative; overflow: hidden; } .project-carousel .owl-item a { padding: 0; margin: .2rem; position: relative; overflow: hidden; display: block; border: 2px solid #dedede } .project_title { opacity: .8; display: block; color: #fff; position: absolute; top: 0; left: 0; z-index: 5; padding: 15% 10%; width: 100%; height: 100%; text-align: left; transition: .5s; background-color: rgba(0, 0, 0, .6) } .project-carousel .owl-item:hover .project_title { opacity: 1; background-color: rgba(0, 0, 0, .8); padding: 25% 10% } .project_title h5 { font-size: 1.6vw; margin: 0; padding: 0 } .project_title h6 { font-size: 1vw; margin: 0; padding: 0; font-weight: 100 } .project-carousel .owl-nav span { display: none } .project-carousel .owl-nav .owl-next, .project-carousel .owl-nav .owl-prev { font-size: 1rem !important; width: 4rem; height: 4rem; background-color: rgba(30, 33, 34, .6) !important; } .project-carousel .owl-nav .owl-next:hover, .project-carousel .owl-nav .owl-prev:hover { background-color: #b0a319 !important } .project-carousel .owl-nav .owl-prev:before { font-family: FontAwesome; content: "\f104" } .project-carousel .owl-nav .owl-next:after { font-family: FontAwesome; content: "\f105" } .project-carousel .owl-nav button.owl-prev { left: 1.6% } .project-carousel .owl-nav button.owl-next { left: 6%; } .project-carousel .owl-nav button { position: absolute; top: 80%; transform: translateY(-50%); color: #fff !important } @media (max-width:1280px) { .project { display: block; position: static; width: 100%; padding: 0 .5rem; } .project-carousel { margin: 0; padding: 0; list-style: none } .project-carousel .owl-item { padding: 0 .5rem; margin: 0; position: relative; overflow: hidden; } .project-carousel .owl-item a { padding: 0; margin: 0; position: relative; overflow: hidden; display: block; border: 0 } .project_title { opacity: .8; display: block; color: #fff; position: absolute; top: 0; left: 0; z-index: 5; padding: 15% 10%; width: 100%; height: 100%; text-align: left; transition: .5s; background-color: rgba(0, 0, 0, .6) } .project-carousel .owl-item:hover .project_title { opacity: 1; background-color: rgba(0, 0, 0, .8); padding: 25% 10% } .project_title h5 { font-size: 1.2rem; } .project_title h6 { font-size: .8rem; font-weight: 500; } } .headline { width: 100%; margin: 1rem auto; display: block; text-align: center; overflow: hidden } .headline:before { content: ""; display: block; width: 6rem; height: .6rem; background-color: #b0a319; margin: 1rem auto; border-radius: 10rem } .headline h1, .headline h2, .headline h3, .headline h4 { margin: 0; padding: 0; line-height: 115% } .headline h1 { font-size: 2.2rem; color: #2d3236; font-weight: 700 } .headline h2 { font-size: 1.2rem; width: 75%; margin: 1rem auto; font-weight: 300; color: #2d3236 } .headline h3 { font-size: 2.2rem; color: #2d3236; font-weight: 700 } .headline h4 { font-size: 1.2rem; margin: 1rem auto; font-weight: 300; color: #2d3236 } .headline p { margin: .6rem 0; padding: 0 } .headline.aligh-left { text-align: left; } .headline.aligh-left:before { margin: 1rem 0; } @media (max-width:1024px) { .headline { width: 100%; margin: auto } .headline h3 { font-size: 2rem } .headline h4 { font-size: 1rem } .headline h5 { font-size: 1.4rem } .headline h6 { font-size: 1rem } } .content { display: block; width: 100%; height: auto; min-height: 500px; padding: 1rem 0 2rem 0; background-color: #fff; } @media (max-width:1024px) { .content { padding: 1rem .6rem; } } .head { width: 100%; height: 105px; background-color: #2d3236; overflow: hidden; } .heading { width: 100%; margin: 1rem auto; display: block; text-align: center; overflow: hidden; } .heading:before { content: ""; display: block; width: 6rem; height: .6rem; background-color: #b0a319; margin: 1rem auto; border-radius: 10rem } .heading h1, .heading h2 { margin: 0; padding: 0; line-height: 115%; } .heading h1 { font-size: 2.6rem; color: #2d3236; font-weight: 700; } .heading h2 { font-size: 1.2rem; width: 75%; margin: 1rem auto; font-weight: 300; color: #2d3236; } @media (max-width:1024px) { .heading { margin: 0 auto; } .heading h1 { font-size: 2rem; } } .projects { width: 100%; margin: 4rem 0; padding: 0; display: block; font-weight: 600; } .projects li { display: block; float: left; width: 23%; padding: .6rem; margin: 0 2.6% 2.6% 0; transition: .3s linear; position: relative; overflow: hidden; background-color: #fff; border: 1px solid #dedede; border-radius: .2rem; box-shadow: 0 0 1rem #ccc; } .projects li img { width: 100%; } .projects li:nth-child(4n+0) { float: right; margin: 0 0 2.5% 0; } .projects li a { width: 100%; padding: 0; display: block; overflow: hidden; text-align: center; position: relative; } .projects li:hover { border: 1px solid #ccc; } .projects li:hover button { display: block; } .data { display: block; text-align: left; border-top: 0 solid #dedede; padding: 1rem 1rem 2rem 1rem; } .data span { display: block; font-size: 1rem; pointer-events: none !important; } .data span a { color: #999 !important; pointer-events: none !important; } .data span.name { font-weight: 600; font-size: 1.6rem; border-bottom: 1px solid #dedede; padding: .4rem 0; margin: 0 0 1rem 0; } .data span.location { font-weight: 600; font-size: 1rem; } .data span.date { font-weight: 600; font-size: 1rem; } @media (max-width:1024px) { .projects { display: flex; flex-wrap: wrap; justify-content: space-between; } .projects li { display: block; width: 48%; float: none; margin: 0 0 3% 0; } .projects li:nth-child(4n+0) { float: none; margin: 0 0 3% 0; } } aside { width: 40%; float: left; display: block; margin: 2rem 0; } aside>a { display: block; width: 100%; padding: .6rem; transition: .3s linear; position: relative; overflow: hidden; background-color: #fff; border: 1px solid #dedede; border-radius: .2rem; box-shadow: 0 0 1rem #ccc; } aside>a>img { width: 100%; vertical-align: bottom; border: 2px solid #dedede; } main { width: 56%; float: right; display: block; margin: 2rem 0; } @media (max-width:1024px) { aside { width: 100%; margin: 0 0 2rem 0; } aside>a { display: block; width: 100%; padding: .6rem; transition: .3s linear; position: relative; overflow: hidden; background-color: #fff; border: 1px solid #dedede; border-radius: .2rem; box-shadow: 0 0 1rem #ccc; } aside>a>img { width: 100%; vertical-align: bottom; border: 2px solid #dedede; } main { width: 100%; float: right; display: block; margin: 2rem 0; } } .table { display: table; padding: 0; width: 100%; overflow: hidden; border: 0 solid #eee; border-collapse: collapse; } .tr { display: table-row; width: auto; padding: 3px 5px; } .td { display: table-cell; width: auto; vertical-align: top; padding: .6rem .2rem; font-size: 1.1rem; border-bottom: 0 solid #eee; } .modImage { width: 100px; border: 1px solid #eee; float: right; } .th { padding: 10px 5px; font-size: 1.3rem; } .td.first { width: 180px; } .table-fixed-layout { table-layout: fixed; } @media (max-width:1120px) { .td { font-size: 1.3rem; } .th { font-size: 1.3rem; } } @media (max-width:480px) { .tr { padding: 3px 5px; } .td { display: table-cell; width: 25%; vertical-align: top; padding: 5px; font-size: 1rem !important; } .th { padding: 10px 5px; font-size: 1.2rem; } .td.first { width: 100px; } .table-fixed-layout { table-layout: unset; } } .gallery { width: 100%; margin: 2rem 0; padding: 0; display: block; font-weight: 600; } .gallery li { display: block; float: left; width: 23%; padding: .6rem; margin: 0 2.6% 2.6% 0; transition: .3s linear; position: relative; overflow: hidden; background-color: #fff; border: 1px solid #dedede; border-radius: .2rem; box-shadow: 0 0 1rem #ccc; } .gallery li img { width: 100%; } .gallery li:nth-child(4n+0) { float: right; margin: 0 0 2.5% 0; } .gallery li:hover img { filter: brightness(120%); } .downloads { width: 100%; display: flex; flex-wrap: wrap; } .downloads a { width: 48%; position: relative; overflow: hidden; margin: 0 2% 2% 0; padding: 25px; display: block; float: left; border: 1px solid #dedede; color: #444; background-color: #fff; } .downloads a h3 { width: 100%; padding: 0; margin: 0; display: block; font-size: 1.4rem; } .downloads a p { width: 100%; padding: 0; margin: 0; display: block; font-size: 1rem; line-height: 100%; } .downloads a span { width: 60px; height: 60px; line-height: 60px; display: block; margin: 0 3% 0 0; float: left; border: 1px solid #eee; border-radius: 0; color: #fff; font-size: 2rem; overflow: hidden; position: relative; background-color: #b0a319; text-align: center; transition: .3s; } .downloads a:hover span { transform: scale(.9) rotate(90deg); border-radius: 50%; } .downloads a span i { position: absolute; display: block; width: 100%; height: 100%; line-height: 60px; } .downloads a:hover span i { animation: arrow 1s forwards; } @media (max-width:1024px) { .downloads a { width: 100%; margin: 0 0 2% 0; } } @keyframes arrow { 0% { left: 0; } 10% { left: 25%; } 20% { left: 0; } 30% { left: 25%; } 40% { left: 50%; } 50% { left: 75%; } 60% { left: 100%; } 70% { left: -100%; opacity: 0; } 80% { left: -75%; opacity: 1; } 90% { left: -50%; } 100% { left: 0; } } /* Contact Form */ .contact_info { display: block; overflow: hidden; margin: 0 0 1rem 0; font-weight: 600; padding: 0; font-size: 1rem; text-align: center; } .contact_info .row { display: block; width: 32%; margin: 0 2% 0 0; float: left; padding: 1rem; line-height: 120%; color: #555; border: 2px solid #dedede; } .contact_info .row:last-child { float: right; margin: 0; } .contact_info .row i { display: block; width: 100%; text-align: center; margin: 1rem 0; font-size: 3rem; color: #444; } .contact_info .row a { min-height: 58px; display: block; } @media (max-width: 1024px) { .contact_info { display: block; overflow: hidden; margin: 25px 0; font-size: 1.2rem; } .contact_info .row { width: 100%; margin: 0; float: left; padding: 25px; } } .contact_form { width: 100%; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } .form_row { width: 49%; display: block; overflow: hidden; color: #111; margin: 0 0 10px 0; padding: 0; } .form_row input, .form_row textarea { width: 100%; font-size: 1.1rem; display: block; padding: 0 20px; margin: 10px 0; height: 50px; line-height: 50px; background-color: #fff; color: #444; border: 2px solid #dedede; -webkit-transition: .2s; transition: .2s; } .form_row textarea { height: 180px; } .form_row input:focus, .form_row textarea:focus { border: 2px solid #cf3053; background: #f7f7f7; } .form_row input[type="submit"] { width: 100%; height: 55px; float: right; font-size: 1.3rem; line-height: 45px; font-weight: 700; text-align: center; overflow: hidden; margin: 20px 0 0 0; display: block; border: none; background-color: #363435; color: #fff; cursor: pointer; transition: all .1s linear; -moz-transition: all .1s linear; -webkit-transition: all .1s linear; border-radius: 5px; } .form_row input[type="submit"]:hover { filter: brightness(125%); } @media (max-width: 1024px) { .contact_form { width: 100%; margin: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between; } .form_row { width: 108%; display: block; overflow: hidden; color: #111; margin: 0; padding: 0; } .form_row input, .form_row textarea { margin: 0 0 10px 0; } } #map_container { width: 100%; height: 60vh; margin: 0; border: 1px solid #dedede; border-radius: .4rem; position: relative; overflow: hidden; z-index: 0; filter: gray; opacity: 1; -webkit-filter: grayscale(0); transition: .5s } #map_container iframe { position: absolute; width: 100%; height: 60vh } @media (max-width:1024px) { #map_container { width: 100%; height: 60vh } #map_container iframe { position: absolute; width: 100%; height: 100% } } .hrform { margin: 25px 0 0 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between } .hrform .cls { width: 48%; display: block; overflow: hidden } .hrform .cls:last-child { width: 100%; } .hrform .cls strong { display: block; margin: 0 0 20px 0; color: #777; font-size: 1.2rem } .hrform .cls input[type=text] { width: 100%; font-size: 1rem; display: block; padding: 0 20px; height: 45px; line-height: 45px; background-color: #fff; color: #444; border: 1px solid #ccc; -webkit-transition: .2s; transition: .2s; margin: 0 0 15px 0 } .hrform .cls textarea { width: 100%; font-size: 14px; display: block; padding: 10px 20px; margin: 0 0 15px 0; height: 150px; background-color: #fff; color: #444; border: 1px solid #ccc; -webkit-transition: .2s; transition: .2s } .hrform .cls input[type=submit] { width: 200px; height: 55px; line-height: 40px; font-size: 1rem; font-weight: 700; margin: 15px 0 0 0; padding: 0; float: right; display: block; border: none; background-color: #20201f; color: #fff; cursor: pointer; border-radius: 5px } .hrform .cls .upload { width: 125px; height: 40px; border-radius: 5px; overflow: hidden; background: url(../images/upload.jpg) top center no-repeat; background-size: 100%; color: #fff; margin: 0 0 10px 0; filter: grayscale(100%); } .hrform .cls .upload:hover { opacity: .8 } .hrform .cls .upload>input { display: block !important; width: 130px !important; height: 30px !important; opacity: 0 !important; overflow: hidden !important; position: relative; z-index: 9999; background: 0 0; cursor: pointer } .hrform .cls input.code { width: 75%; height: 55px; float: left } .hrform .cls .security { width: 25%; height: 55px; line-height: 50px; padding: 0 15px; margin: 0; font-weight: 800; float: left; background: none; font-size: 3rem; color: #1a1a1a } @media (max-width:1024px) { .hrform .cls { width: 100% } } footer { width: 100%; height: 100vh; display: block; padding: 10% 0; margin: 0; color: #fff; position: relative; border-top: 1px solid #363435; background-color: #2d3236; } footer .wrapper { display: block; width: 95%; margin: 0 auto; } .columns { display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 0; font-size: 1.2rem; } .columns .cols { display: block; width: 20%; } .columns .cols:nth-child(1) { width: 30%; } .columns .title { display: block; overflow: hidden; font-weight: 700; padding: 0; font-size: 2rem; margin: 2rem 0; color: #fff; } .columns .link { margin: 1rem 0; display: block; } .columns .link a { color: #dedede; font-weight: 400; display: inline; font-size: 1.2rem; } .columns .link a:hover { color: #b0a319; } .contact_row { display: block; margin: 1rem 0; overflow: hidden; } .contact_row>i { float: left; display: block; width: 2rem; height: 2rem; line-height: 2rem; padding: 0; margin: 0 1rem 0 0; border-radius: .2rem; background-color: #b0a319; text-align: center; color: #222; } .contact_row>span { float: left; display: block; width: 80%; padding: 0 0; } .contact_row>span a { color: #fff; } @media (max-width:1280px) { footer { padding: 2rem 0; height: auto; } footer .wrapper { width: 90%; } .columns { padding: 0; width: 100%; flex-wrap: wrap; font-size: 1.2rem; } .columns .cols { width: 100%; padding: 0 1rem; } .columns .cols:nth-child(1) { width: 100%; } } .subscribe { display: block; overflow: hidden; width: 80%; } .subscribe p { display: block; margin: 25px 0 0 0 !important; } .subscribe form { height: 50px; width: 100%; display: block; margin: 0; overflow: hidden; background-color: #fff; border: 1px solid #222; border-radius: 5px; } .subscribe form input[type=text] { width: 70%; float: left; border: none; background: 0 0; height: 45px; font-size: 1rem; padding: 0 20px; color: #fff; font-weight: 400; } .subscribe form button { float: right; border: none; height: 50px; padding: 0 2rem; font-size: 1.6rem; color: #222; position: relative; cursor: pointer; background: #b0a319; } .subscribe form button:before { font-family: fontAwesome; content: "\2b"; } @media (max-width:1280px) { .subscribe { width: 100%; } } .social-feed { display: block; overflow: hidden; } .social-feed a { display: inline-block; width: 2.6rem; height: 3rem; line-height: 3rem; text-align: center; margin: 0; overflow: hidden; position: relative; background-repeat: no-repeat; background-position: center center; background-size: 20px; color: #eee; border-radius: .4rem; font-size: 1.4rem; } .social-feed a:hover { filter: brightness(100%); } .social-feed a.social_facebook:hover { color: #4b69b1; } .social-feed a.social_twitter:hover { color: #37b1e2; } .social-feed a.social_instagram:hover { color: #cf3053; } .social-feed a.social_youtube:hover { color: red; } @media (max-width:1280px) { .social-feed { display: none; } } .bottom { width: 100%; height: auto; display: block; overflow: hidden; padding: 1rem 0; margin: 0; color: #333; background: #eee; } .bottom .wrapper { display: block; width: 80%; margin: 0 auto; } .copyright { display: block; font-weight: 400; margin: 0; float: left; } .copyright p { color: #777; margin: 0; padding: 0; } .copyright p span { color: #777; } .copyright p strong { color: #e2294f; font-weight: 800; } .webtasarim { display: block; margin: 0; float: right; } .webtasarim a { display: block; } .webtasarim img { width: 4rem; } @media (max-width:1280px) { .bottom .wrapper { width: 90%; } .copyright { float: none; text-align: center; padding: 0 5%; } .webtasarim { float: none; text-align: center; margin: 20px 0 0 0; } } .siteup { position: fixed; bottom: 2.5%; right: -60px; display: block; width: 60px; height: 60px; line-height: 60px; font-size: 1rem; color: #fff; overflow: hidden; background: #1d1d1b; -webkit-transition: .3s; transition: .3s; z-index: 10; border-radius: 50%; text-align: center; } .siteup.sticky { right: 1rem; } @media (max-width:1280px) { .siteup { bottom: 10px; right: -50px; width: 50px; height: 50px; line-height: 50px; background-size: 22px; } } .animation-element { opacity: 0; position: relative; } .animation-element.anime-left { opacity: 0; transition: all .6s linear; transform: translate3d(-300px, 0, 0); } .animation-element.anime-left.in-view { opacity: 1; transform: translate3d(0, 0, 0); } .animation-element.anime-right { opacity: 0; transition: all .6s linear; transform: translate3d(300px, 0, 0); } .animation-element.anime-right.in-view { opacity: 1; transform: translate3d(0, 0, 0); } .animation-element.anime-top { opacity: 0; transition: all .6s .3s linear; transform: translate3d(0, 300px, 0); } .animation-element.anime-top.in-view { opacity: 1; transform: translate3d(0, 0, 0); } .animation-element.anime-bottom { opacity: 0; transition: all .6s .3s linear; transform: translate3d(0, 100px, 0); } .animation-element.anime-bottom.in-view { opacity: 1; transform: translate3d(0, 0, 0); } .animation-element.anime-zoom { opacity: 0; transition: all .6s linear; transform: scale(0); } .animation-element.anime-zoom.in-view { opacity: 1; transform: scale(1); } @media (max-width:1280px) { .animation-element { opacity: 0; position: relative; } .animation-element.anime-left { opacity: 0; transition: all .1s linear; transform: translate3d(-300px, 0, 0); } .animation-element.anime-left.in-view { opacity: 1; transform: translate3d(0, 0, 0); } .animation-element.anime-right { opacity: 0; transition: all .1s linear; transform: translate3d(300px, 0, 0); } .animation-element.anime-right.in-view { opacity: 1; transform: translate3d(0, 0, 0); } .animation-element.anime-top { opacity: 0; transition: all .1s linear; transform: translate3d(0, 300px, 0); } .animation-element.anime-top.in-view { opacity: 1; transform: translate3d(0, 0, 0); } .animation-element.anime-bottom { opacity: 0; transition: all .1s linear; transform: translate3d(0, 300px, 0); } .animation-element.anime-bottom.in-view { opacity: 1; transform: translate3d(0, 0, 0); } .animation-element.anime-zoom { opacity: 0; transition: all .1s linear; transform: scale(0); } .animation-element.anime-zoom.in-view { opacity: 1; transform: scale(1); } } .lightbox { cursor: pointer; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #fff; -webkit-filter: none !important; filter: none !important; z-index: 999999999999 !important; } .lightbox img { display: block; position: absolute; } .lightbox-loading { background: url(../images/loading.gif) center center no-repeat; width: 80px; height: 80px; margin: 0 0 0 -40px; position: absolute; top: 40%; left: 50%; } .lightbox-caption { display: none; position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; z-index: 9998; } .lightbox-caption p { margin: 0 auto; max-width: 70%; display: inline-block; padding: 10px; color: #fff; font-size: 12px; line-height: 18px; } .lightbox-button { position: absolute; z-index: 9999; background: no-repeat center center; width: 60px; height: 60px; opacity: .9; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; transition: all .3s; background-size: 35px; } .lightbox-button:focus, .lightbox-button:hover { opacity: 1; } .lightbox-close { right: 30px; top: 20px; background-image: url(../svg/close.svg); } .lightbox-nav { top: 47%; width: 100%; margin-top: -16px; } .lightbox-nav-next { right: 30px; width: 60px; height: 60px; background-image: url(../svg/next.svg); background-size: 80px; } .lightbox-nav-prev { left: 30px; width: 60px; height: 60px; background-image: url(../svg/prev.svg); background-size: 80px; } @media (max-width:1280px) { .lightbox-nav { top: 90%; } } .ref-section { padding: 15rem 0; background: #fff; overflow: hidden; } .ref-container { width: min(95%, 1920px); margin: 0 auto; } .ref-head { margin-bottom: 36px; } .ref-head span { display: inline-block; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #777; margin-bottom: 10px; } .ref-head h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); font-weight: 500; color: #111; } .ref-carousel { position: relative; overflow: hidden; width: 100%; } .ref-carousel::before, .ref-carousel::after { content: ""; position: absolute; top: 0; width: 90px; height: 100%; z-index: 2; pointer-events: none; } .ref-carousel::before { left: 0; background: linear-gradient(to right, #fff, transparent); } .ref-carousel::after { right: 0; background: linear-gradient(to left, #fff, transparent); } .ref-track { display: flex; gap: 24px; width: max-content; will-change: transform; } .ref-item { width: 180px; height: 92px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #eee; background: #fafafa; transition: transform .3s ease, border-color .3s ease, background .3s ease; } .ref-item:hover { transform: translateY(-4px); border-color: #ddd; background: #fff; } .ref-item img { max-width: 120px; max-height: 52px; object-fit: contain; opacity: .65; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; } .ref-item:hover img { opacity: 1; filter: grayscale(0); } @media (max-width: 768px) { .ref-section { padding: 64px 0; } .ref-item { width: 145px; height: 78px; } .ref-carousel::before, .ref-carousel::after { width: 48px; } }