@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: #1e2122; -webkit-transition: all .1s ease; transition: all .1s ease } a:hover { color: #1e2122 } b, strong { font-weight: 800 } input { -webkit-border-radius: 0; border-radius: 0 } input, textarea, button { font-family: 'Source Sans Pro', sans-serif; } body, html { width: 100vw; margin: 0; padding: 0 } html { scroll-behavior: smooth; } body { font-family: 'Source Sans Pro', sans-serif; font-size: 1.2rem; overflow-x: hidden; overflow-y: scroll; color: #fff; background-color: #fff } ::-webkit-scrollbar { background-color: #dedede; width: .5em; position: fixed; z-index: 91 } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive { cursor: pointer; background-color: #838383 } .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:1024px) { .ui-tooltip { display: none !important } } .clearfix { clear: both } .loading { display: block; position: fixed; z-index: 999999999999 !important; top: 0; left: 0; color: #fff; padding: 0; width: 100vw; height: 100vh; background-color: rgba(52, 58, 64, .8) } .loader { width: 90px; height: 90px; border: 3px solid rgba(255, 255, 255, .1); border-bottom: 3px solid transparent; border-radius: 50%; position: relative; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; display: flex; justify-content: center; align-items: center; margin: 20% auto } .loader .inner { width: 64px; height: 64px; border: 3px solid transparent; border-top: 3px solid #0b73ba; border-radius: 50%; -webkit-animation: spinInner 1s linear infinite; animation: spinInner 1s linear infinite } .loader.small { width: 50px; height: 50px; margin: 10% auto; border: 3px solid rgba(113, 113, 113, .3); border-bottom: 3px solid transparent } .loader.small .inner { width: 36px; height: 36px; border: 3px solid transparent; border-top: 3px solid #2d3236 } @media (max-width:1024px) { .loader { margin: 18rem auto } } @-webkit-keyframes spin { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } } @keyframes spin { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } } @-webkit-keyframes spinInner { 0% { transform: rotate(0) } 100% { transform: rotate(-720deg) } } @keyframes spinInner { 0% { transform: rotate(0) } 100% { transform: rotate(-720deg) } } .input, .textarea { background-color: #4f4f4f; padding: 8px; width: 100%; font-family: arial; font-size: .6rem; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); -webkit-border-radius: 3px; border-radius: 3px; -webkit-appearance: none; appearance: none; border: 0; outline: 0; -webkit-transition: .3s ease all; -moz-transition: .3s ease all; -ms-transition: .3s ease all; -o-transition: .3s ease all; transition: .3s ease all } select { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>"); background-color: #4f4f4f; background-repeat: no-repeat; background-position: right 10px top 12px; background-size: 12px 12px; padding: 8px; width: 100%; font-family: arial; font-size: .6rem; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); -webkit-border-radius: 3px; border-radius: 3px; -webkit-appearance: none; appearance: none; border: 0; outline: 0; -webkit-transition: .3s ease all; -moz-transition: .3s ease all; -ms-transition: .3s ease all; -o-transition: .3s ease all; transition: .3s ease all } select:active, select:focus { border: 0; outline: 0 } select:hover { background-color: #535353 } #container { width: 100%; height: 100%; margin: 0; padding: 0 } .container { display: block; width: 100%; overflow: hidden } .container .wrapper { display: block; width: 85%; margin: 0 auto } @media (max-width:1024px) { .container .wrapper { width: 95% } } header { display: block; width: 100%; margin: 0; padding: 0; transition: .3s; background-color: #fff; position: fixed; top: 0; z-index: 30; } header.sticky { height: auto; box-shadow: 0 0 10px #ccc; } header>.wrapper { display: block; width: 70%; margin: 0 auto; padding: 1rem 0; position: relative } @media (max-width:1024px) { header { overflow: hidden; height: 150px; } header.sticky { height: 100px; } header>.wrapper { width: 95% } } .upper { display: block; width: 100%; height: 50px; transition: .3s; padding: 0; background-color: #fff; border-bottom: 1px solid #dedede; } .upper>.wrapper { width: 70% } .upper.sticky { height: 0; } @media (max-width:1024px) { .upper { padding: 0; } .upper>.wrapper { width: 95% } } .topnav { display: block; height: 100%; margin: 0; padding: 0 .1rem; float: left } .topnav ul { margin: 0; padding: 0; } .topnav li { display: block; float: left; position: relative; margin: 0 1rem 0 0; } .topnav li a { display: block; text-align: center; font-size: 1rem; padding: .8rem 0; line-height: 100%; color: #111 } .topnav li i { margin: 0 1rem 0 0; font-size: .7rem; color: #0b73ba; line-height: 100%; } .topnav li:hover a { color: #ccc } @media (max-width:1024px) { .topnav li { margin: 0 .4rem 0 0; } .topnav li a { font-size: 1rem; } .topnav li i { margin: 0 .4rem 0 0; font-size: .6rem; } } .language { display: block; height: 100%; margin: 0; padding: 0 .2rem; float: right; position: relative; z-index: 98; } .language li { display: block; float: left; position: relative } .language li a { display: block; text-align: center; font-size: 1.4rem; padding: .6rem 0; line-height: 1; color: #111 } .language li img { width: 25px; float: left; margin: 0 .2rem; } .language li:hover>a { color: #ccc } .language ul { margin: 0; padding: 0; position: absolute; display: none; left: 0; top: 0px; background-color: #fff; } .language>li:hover>ul { display: block; } .logo { width: 200px; height: 100px; margin: 0; float: left; display: block; overflow: hidden; transition: .3s; cursor: pointer; background-position: top center; background-repeat: no-repeat; background-image: url(../images/logo.png); background-size: 85%; } @media (max-width:1024px) { .logo { width: 175px; height: 75px; } } .toggleMenu { color: #fff !important; background-color: #0b73ba; text-align: center; overflow: hidden; transition: .5s; opacity: 1; display: none; font-family: FontAwesome; float: right; margin: 0; font-size: 1.4rem; position: absolute; top: 2rem; right: 0; z-index: 100; border-radius: 50% } .toggleMenu:before { content: "\f0c9"; display: block; transform: scale(0); width: 3rem; height: 3rem; line-height: 2; animation: menu 1s forwards } .toggleMenu.open:before { content: "\f00d"; background-color: #0b73ba; transform: scale(0); animation: menuOpen 1s forwards; } header.sticky .toggleMenu:before { background-color: #0b73ba; } @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: 99; top: 0; left: 0; overflow-y: auto; background-color: rgba(255, 255, 255, .9); } .nav { width: 40%; margin: 0; padding: 5% 10%; 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: .5rem } .nav li a { display: block; color: #1e2122; font-size: 2rem; padding: 2rem; text-align: left; font-weight: 500; 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: #1e2122; float: right; font-size: .8rem; position: absolute; right: 2rem; top: 3rem } .nav>li:hover>a { box-shadow: inset 50rem 0 4px #0b73ba; border-color: #0b73ba; color:#fff } .nav li:hover i { width: 4rem; transform: translateX(0); visibility: visible; color:#fff; } .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: #888; padding: 2rem 6.2rem; font-weight: 500; height: auto; font-size: 1.2rem; border-bottom: 0 } .nav li ul li:hover a { color: #0b73ba; } .nav li.hover ul { display: block } .nav_contact { width: 50%; margin: 0; padding: 5% 10%; float: left; font-size: 1.6rem; font-weight: 100; color:#111; } .nav_contact b { font-size: 1.6rem; font-weight: 600 } .nav_contact span { display: block; margin: .6rem 0; } .nav_contact i { margin: 0 .6rem 0 0; } @media (max-width:1024px) { nav { background-color: rgba(30, 33, 34, .98) } .nav { width: 75%; padding: 10% 0 0 0; float: left; transform: scale(1) } .nav li a { font-size: 1.4rem; padding: 1rem; } .nav li i { display: none; } .nav li ul li a { color: #888; padding: 1rem 1.1rem; } .nav>li>a.parent:after { font-size: 1rem; right: 2rem; top: 1.5rem } .nav_contact { display: block; width: 100%; padding: 5% 5%; font-size: 1.2rem; } } .slider { display: block; width: 100%; position: relative; overflow: hidden } .banner { width: 100%; margin: 0; padding: 0 } .banner .owl-item { margin: 0 !important; padding: 0 !important; overflow: hidden } .banner .owl-item img { width: 100%; vertical-align: bottom } .banner .owl-item .banner-desk { display: block !important } .banner .owl-item .banner-mobile { display: none !important } .banner .owl-nav span { display: none } .banner .owl-nav .owl-next, .banner .owl-nav .owl-prev { font-size: 1rem !important; width: 4rem; height: 4rem; background-color: #0b73ba !important; border: 1px solid #0b73ba !important; } .banner .owl-nav .owl-next:hover, .banner .owl-nav .owl-prev:hover { background-color: #1e2122 !important } .banner .owl-nav .owl-prev:before { font-family: FontAwesome; content: "\f104" } .banner .owl-nav .owl-next:after { font-family: FontAwesome; content: "\f105" } .banner .owl-nav button.owl-prev { left: 2.5% } .banner .owl-nav button.owl-next { right: 2.5%; } .banner .owl-nav button { position: absolute; top: 50%; transform: translateY(-50%); color: #fff !important } @media (max-width:1024px) { .slider { height: auto; margin: 10% 0 0 0; } .banner { height: auto; } .banner .owl-item .banner-desk { display: none !important } .banner .owl-item .banner-mobile { display: block !important } .banner .owl-nav button { display: none !important; } } .caption { width: 100%; height: 100%; padding: 15% 0 0 15%; margin: 0; z-index: 7; position: absolute; top: 0; left: 0; overflow: hidden; background-color: rgba(0, 0, 0, .4); } .caption-desc, .caption-title { width: 50%; display: block; color: #fff; padding: 0; margin: 0; text-align: left; position: relative; opacity: 0; z-index: 1; text-shadow: 0 0 5px #111; } .caption-title { font-size: 4rem; font-weight: 700; animation: title .2s .4s linear forwards; line-height: .9; } .caption-desc { margin: 1rem 0 0 0; font-size: 1.2rem; font-weight: 100; animation: desc .2s .5s linear forwards; line-height: 1.3; } .caption-link { display: block; width: 200px; opacity: 0; margin: 2rem 0 !important; animation: link .2s .6s linear forwards; position: relative; z-index: 1 } .caption-link a { display: block; border: 1px solid #0b73ba; color: #fff; padding: 1rem 2rem; } .caption-link i { float: right; margin: .2rem 0 0 0; } .caption-link a:hover { background-color: #0b73ba; color: #fff; transform: scale(1.1) translateX(10px); } .caption-link a:hover i { margin: .2rem 0 0 1rem; } @media (max-width:1120px) { .caption { padding: 50% 10% } .caption-desc, .caption-title { width: 100% } .caption-title { font-size: 3rem } .caption-desc { font-size: 1rem } .caption-link { display: block; width: 250px; } .caption-link a { margin: 1rem 0 !important; } } @keyframes title { from { opacity: 0 } to { opacity: 1 } } @keyframes desc { from { opacity: 0 } to { opacity: 1 } } @keyframes link { from { opacity: 0 } to { opacity: 1 } } .headline { width: 800px; margin: 5% auto; display: block; text-align: center; overflow: hidden } .headline:before { content: ""; display: block; width: 5rem; height: .8rem; background-color: #0b73ba; 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: 3.6rem; color: #111; font-weight: 700 } .headline h2 { font-size: 1.6rem; width: 75%; margin: 1rem auto; font-weight: 300; color: #111 } .headline h3 { font-size: 3.6rem; color: #111; font-weight: 700 } .headline h4 { font-size: 1.6rem; margin: 0 auto; font-weight: 300; color: #111 } .headline p { margin: .6rem 0; padding: 0 } .headline.text-light * { color: #fff } .headline.text-light:before { background-color: #0b73ba } .headline.text-left { text-align: left; width: 100%; } .headline.text-left:before { margin: 1rem 0; } @media (max-width:1024px) { .headline { width: 100%; margin: 4rem auto } .headline h3 { font-size: 2.2rem } .headline h4 { font-size: 1rem } .headline h5 { font-size: 1.4rem } .headline h6 { font-size: 1rem } } .readmore { display: block; width: 275px; margin: 2rem 0; position: relative; z-index: 1 } .readmore a { display: block; border: 2px solid #ec0e8f; color: #111; font-weight: 600; padding: 1rem 2rem; font-size: 1.4rem; } .readmore i { float: right; margin: .2rem 0 0 0; } .readmore a:hover { background-color: #ec0e8f; color: #fff; transform: scale(1.1) translateX(10px); } .readmore a:hover i { margin: .2rem 0 0 1rem; } .readmore.align-center { margin: 2rem auto; } .readmore.align-center a:hover { margin: 2rem auto; transform: scale(1.1) translateX(0); } @media (max-width:480px) { .readmore { width: 70%; } } .section1 { width: 100%; margin: 0; padding: 0; } .section1 .wrapper { width: 100%; } .about { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: 0 auto; } .about-left { width: 50%; overflow: hidden; background-size: cover; background-position: center; position: relative; } .about-left:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(0, 0, 0, 0) 1%, transparent 1%); background-size: 5px 5px; } .about-right { width: 50%; overflow: hidden; padding: 5%; font-size: 1.6rem; font-weight: 100; color: #111; } .about-right h3 { color: #111; font-size: 4rem; font-weight: 700; margin: 0; padding: 0; } .about-right h4 { color: #111; font-size: 3rem; font-weight: 100; margin: 0; padding: 0; } .about-right a { color: #111; margin: 4rem 0 } @media (max-width:1024px) { .section1 .wrapper { width: 100% } .about-left { width: 100%; height: 250px; background-size: 100%; } .about-right { width: 100%; padding: 2rem; font-size: 1.2rem } .about-right h3 { font-size: 2.6rem } .about-right h4 { font-size: 1.6rem; } .about-right a { margin: 4rem 0 0 0 } } .section7 { width: 1280px; margin: -10% auto 0 auto; z-index: 10; padding: 5rem 0; background-color: #0b73ba; background-color: #fff; position: relative; overflow: hidden; } .section7 .wrapper { width: 95%; } .counter-block { width: 100%; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between } .counter-item { display: block; width: 25%; margin: 0 0 4% 0; padding: 0; position: relative; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .counter-data { display: block; width: 100%; position: relative; overflow: hidden; transition: .2s; text-align: center } .counter-data h5 { color: #0b73ba; padding: 0; margin: 0; font-size: 5rem; font-weight: 700; line-height: 100% } .counter-data h6 { color: #111; padding: 1rem 0; margin: 0; font-size: 1.4rem; font-weight: 100; } @media (max-width:1024px) { .section7 { width: 100%; padding: 1rem 0; } .section7 .wrapper { width: 90%; } .counter-item { width: 100%; margin: 0; padding: 1rem; border-bottom: 1px dashed #ccc; } .counter-item:last-child { border-bottom: 0; } .counter-data h5 { font-size: 5rem; } .counter-data h6 { font-size: 1.2rem; } } .section3 { padding: 0; overflow: hidden; color: #111; } .section3 .wrapper { width: 80%; } .flexbox { display: flex; flex-wrap: wrap; justify-content: space-between; } .flex-col { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 4% 0; position: relative; } .flex-col:nth-child(2n+0) { flex-direction: row-reverse } .flex-left { width: 48%; position: relative; } .flex-image { width: 100%; vertical-align: bottom; filter: brightness(110%); border: 0px solid #999; box-shadow: -10px -10px 30px #ccc; } .flex-right { width: 45%; padding: 7% 0; text-align: left } .flex-title { display: block; margin: 0; padding: .6rem 0; border-radius: .2rem; font-weight: 100; font-size: 4rem; line-height: 1; color: #1a2227; text-shadow: 0 0 2px #fff } .flex-title:before { content: ""; display: block; float: left; width: 1.6rem; height: 4.5rem; background-color: #0b73ba; margin: 0 1rem 0 0; border-radius: 3rem; } .flex-summary { display: block; margin: 1rem 0 0 0; font-size: 1.4rem; } .flex-link { display: block; width: 250px; margin: 2rem 0; position: relative; z-index: 1 } .flex-link a { display: block; border: 2px solid #0b73ba; text-align: left; color: #111; font-weight: 600; padding: 1rem 2rem; font-size: 1.4rem; } .flex-link i { float: right; margin: .2rem 0 0 0; } .flex-link a:hover { background-color: #0b73ba; color: #fff; transform: scale(1.1) translateX(0); } .flex-link a:hover i { margin: .2rem 0 0 1rem; } .flex-col:nth-child(2n+0) .flex-right { text-align: right } .flex-col:nth-child(2n+0) .flex-title:before { margin: 0 0 0 1rem; float: right } .flex-col:nth-child(2n+0) .flex-link { float: right; } @media (max-width:1024px) { .section3 .wrapper { width: 85% } .flex-col { margin: 0 0 5% 0; width: 100%; } .flex-left { width: 100% } .flex-right { width: 100% } .flex-title { font-size: 2rem } .flex-summary { font-size: 1rem } } .section2 { width: 100%; margin: 0; padding: 0 0 5rem 0; display: block; overflow: hidden; background-size: cover; color: #2d3236; } .section2 .wrapper { width: 80% } .block { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .block-col { width: 31%; height: 250px; display: block; margin: 2% 0; position: relative; overflow: hidden; box-shadow: 0 0 20px #aeaeae; } .block-header { display: block; width: 100%; height: 100%; overflow: hidden; color: #fff; padding: 2rem; position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .4); transition: .6s } .block-title { display: block; margin: 0; font-weight: 700; font-size: 1.4rem } .block-title:after { content: ""; background-color: #0b73ba; width: 25%; height: .6rem; border-radius: 1rem; margin: .4rem 0; display: block; font-size: 2rem; text-align: center } .block-summary { display: block; margin: 1rem 0 0 0; font-size: 1.4rem; padding: 0; overflow: hidden } .block-header i { position: absolute; right: 5%; top: 15%; z-index: 0; font-size: 10rem; opacity: .5; transform: rotate(-20deg); } .block-col:hover .block-header { background-color: rgba(0, 0, 0, .8); padding: 3rem 2rem; bottom: 0 } .block-col:hover .block-summary { opacity: 1; } @media (max-width:1024px) { .section2 { padding: 0 0 3rem 0 } .section2 .wrapper { width: 90% } .block { display: flex; flex-wrap: wrap; justify-content: space-between } .block-col { width: 100%; margin: 0 0 2rem 0 } .block-header { background-color: rgba(0, 0, 0, .8) } .block-title { font-size: 1.4rem } .block-summary { font-size: .8rem } } .section4 { width: 100%; margin: 0; padding: 0 0 5rem 0; background-color: #f7f7f7; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .section4 .wrapper { width: 1200px; } .references { width: 100%; margin: 0; padding: 0 } .references .owl-item { margin: 0 !important; padding: 0 !important; } .references .owl-item img { width: 100%; vertical-align: bottom; filter: grayscale(100%); opacity: .5; } @media (max-width:1024px) { .section4 { width: 100%; margin: 0; padding: 0 0 2rem 0; } .section4 .wrapper { width: 90% } } .section15 { width: 100%; margin: 0; padding: 0 0 5rem 0; display: block; overflow: hidden; background-size: cover; color: #2d3236; } .section15 .wrapper { width: 80% } .video { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .video-col { width: 48%; height: 250px; display: block; margin: 2% 0; position: relative; overflow: hidden; box-shadow: 0 0 20px #aeaeae; } .video-header { display: block; width: 100%; height: 100%; overflow: hidden; color: #fff; padding: 2rem; position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .8); transition: .6s } .video-title { display: block; margin: 0; font-weight: 700; font-size: 1.4rem } .video-title:after { content: ""; background-color: #0b73ba; width: 25%; height: .6rem; border-radius: 1rem; margin: .4rem 0; display: block; font-size: 2rem; text-align: center } .video-summary { display: block; margin: 1rem 0 0 0; font-size: 1.4rem; padding: 0; overflow: hidden } .video-header i { position: absolute; right: 5%; top: 15%; z-index: 0; font-size: 10rem; opacity: .5; transform: rotate(-20deg); } .video-col:hover .video-header { background-color: rgba(0, 0, 0, .8); padding: 3rem 2rem; bottom: 0 } .video-col:hover .video-summary { opacity: 1; } @media (max-width:1024px) { .section15 { padding: 0 0 3rem 0 } .section15 .wrapper { width: 90% } .video { display: flex; flex-wrap: wrap; justify-content: space-between } .video-col { width: 100%; margin: 0 0 2rem 0 } .video-header { background-color: rgba(0, 0, 0, .8) } .video-title { font-size: 1.4rem } .video-summary { font-size: .8rem } } .photos { display: block; width: 100%; margin: 3rem 0 0 0 } .photos-col { width: 23.5%; display: block; margin: 0 2% 2% 0; position: relative; overflow: hidden; box-shadow: 0 0 20px #aeaeae; background-color: #2b252b; float: left; } .photos-col:nth-child(4n+0) { margin: 0 0 2% 0; float: right; } .photos-col i { content: ""; display: block; opacity: 0; transition: .3s; width: 100%; height: 100%; padding: 48% 0; position: absolute; top: 0; left: 0; text-align: center; font-size: 3rem; color: #0b73ba; } .photos-col img { width: 100%; vertical-align: bottom; transition: .1s } .photos-col:hover i { opacity: 1; } .photos-col:hover img { transform: scale(1.1); } @media (max-width:1024px) { .photos { display: flex; flex-wrap: wrap; justify-content: space-between; } .photos-col, .photos-col:nth-child(4n+0) { width: 48%; margin: 0 0 4% 0; } } .section99 { width: 100%; height: 175px; overflow: hidden; margin: 0; padding: 0; border-bottom: 1px solid #111; background-color: #fff; } @media (max-width:1024px) { .section99 { height: 140px; } } .section5 { width: 100%; overflow: hidden; clear: both; margin: 0; padding: 0; background-color: #111; } .section5 .wrapper { width: 70%; } @media (max-width:1024px) { .section5 { padding: 10% 0 0 0; } .section5 .wrapper { width: 90%; } } .heading { width: 100%; margin: 3% auto; display: block; text-align: left; overflow: hidden } .heading:before { content: ""; display: block; width: 5rem; height: .2rem; background-color: #0b73ba; margin: 0 0 1rem 0; border-radius: 10rem } .heading.align-center { text-align: center; width: 1000px; } .heading.align-center:before { margin: 1rem auto; } .heading h1, .heading h2, .heading h3, .heading h4 { margin: 0; padding: 0; line-height: 115%; } .heading h1 { font-size: 2rem; color: #fff; } .heading h2 { font-size: 1.2rem; font-weight: 300; color: #fff; } .heading h3 { font-size: 2rem; } .heading h4 { font-size: 1.2rem; font-weight: 300; } @media (max-width:1024px) { .heading { width: 100%; margin: 0 0 10% 0; } .heading.align-center { width: 100%; } .heading h1 { font-size: 2rem; } .heading h2 { font-size: 1.1rem; } .heading h3 { font-size: 2rem; } .heading h4 { font-size: 1.1rem; } } .section6 { width: 100%; margin: 0; padding: 2.5% 0; border-top: 1px solid #222; position: relative; background-color: #fff; color: #111; } .section6 .wrapper { width: 70%; clear: both; } @media (max-width:1024px) { .section6 { padding: 1rem 0 2.5rem 0; } .section6 .wrapper { width: 90% } } aside { width: 25%; float: left; display: block; margin: 0 0 2rem 0; font-size: 1.2rem; } aside ul { display: block; margin: 0; padding: 0; list-style: none } aside ul li { width: 100%; display: block; margin: 0 0 .8rem 0; } aside ul li i { margin: 0 1rem 0 0; float: right } aside ul li a { width: 100%; padding: 1.5rem 0 1.5rem 2rem; overflow: hidden; display: block; background-color: #eee; border-left: 15px solid #be0113; font-weight: 700; } aside ul li a:hover, aside ul li.active a { color: #be0113; } main { width: 72.5%; float: right; display: block; } aside.detail_aside { width: 40%; } main.detail_main { width: 55%; } @media (max-width:1280px) { aside, aside.detail_aside { display: none !important; } main, main.detail_main { width: 100%; float: right; display: block; margin: 1rem 0 } } .products { width: 100%; margin: 0 } .products-col { width: 32%; display: block; margin: 0 2% 2% 0; float: left; position: relative; overflow: hidden; border: 1px solid #dedede; color: #111; transition: .5s; } .products-col:nth-child(3n+0) { float: right; margin: 0 0 2% 0; } .products-col:hover { box-shadow: 0 0 20px #b6b6b6; } .products-col img { width: 100%; vertical-align: bottom; transition: .5s; } .products-col:hover img { filter: brightness(110%); } .products-header { display: block; width: 100%; overflow: hidden; padding: 2rem; transition: .6s; color: #111; float: left; } .products-title { display: block; margin: 0; font-weight: 700; font-size: 1.4rem; } .products-title:after { content: ""; background-color: #be0113; width: 50%; height: .1rem; border-radius: 1rem; margin: .4rem 0; display: block; font-size: 2rem; text-align: center } .products-summary { display: block; margin: 1rem 0 0 0; font-size: 1rem; padding: 0; overflow: hidden } .products-price { width: 25%; float: right; text-align: right; font-size: 2.8rem; padding: 2rem; } .products-price sup { font-size: 1rem; } @media (max-width:1024px) { .products { display: flex; flex-wrap: wrap; justify-content: space-between; } .products-col, .products-col:nth-child(3n+0) { margin: 0 0 5% 0; width: 100%; float: none; } .products-header { width: 100%; padding: .4rem .4rem 1rem 1rem; } .products-title { font-size: 1.3rem; } .products-summary { margin: 0; font-size: 1rem; } .products-price { width: 100%; font-size: 1.4rem; padding: 0rem .4rem; } } .gallery { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; } .gallery-main { width: 100%; } .gallery-main a { width: 100%; } .gallery-main img { width: 100%; vertical-align: bottom; border: 1px solid #ccc; } .gallery-col { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .gallery-col a { width: 25%; display: block; } .gallery-col a img { width: 100%; vertical-align: bottom; transition: .2s; border: 1px solid #ccc; } .gallery-col a: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: 1rem; display: block; float: left; border: 1px solid #ccc; color: #444; background-color: #fff; } .downloads a:nth-child(3) { float: right; margin: 0 0 2% 0; } .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: #ee2d34; 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; } } .iframe_videos { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: 0 } .iframe_videos iframe { width: 48.5%; background-color: #eee; padding: 1rem; border: 1px solid #ccc; } @media (max-width:1024px) { .iframe_videos iframe { width: 100%; } } #map_container { width: 100%; height: 450px; position: relative; z-index: 0; filter: gray; opacity: .9; -webkit-filter: grayscale(50%); -webkit-transition: .5s; transition: .5s; border: 2px solid #dedede } #map_container iframe { position: absolute; width: 100%; height: 100% } .contact_info { display: block; overflow: hidden; margin: 1rem 0; font-weight: 600; padding: 0; font-size: 1.2rem; text-align: center } .contact_info .row { display: block; width: 30%; margin: 0 5% 0 0; float: left; padding: 2rem 1rem; line-height: 110%; color: #555; border: 1px solid #dedede; } .contact_info .row a { display: block } .contact_info .row:last-child { float: right; margin: 0 } .contact_info .row i { display: block; width: 100%; text-align: center; margin: 0 0 1rem 0; font-size: 3rem; color: #0b73ba } @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: 20px 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.2rem; display: block; padding: 0 20px; margin: 10px 0; height: 50px; line-height: 50px; background-color: #fff; color: #444; border: 1px solid #dedede; -webkit-transition: .2s; transition: .2s } .form_row textarea { height: 180px } .form_row input:focus, .form_row textarea:focus { border: 1px solid #0b73ba; 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: #0b73ba; 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(130%); } @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 } } footer { width: 100%; display: block; padding: 7rem 0 5rem 0; margin: 0; color: #fff; position: relative; border-top: 1px solid #222; background-color: #111; clear: both; } footer .wrapper { display: block; width: 70%; margin: 0 auto } .columns { display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 0; font-size: 1rem } .columns .cols { display: block; border-top: 2px solid #333; } .columns .cols>a { color: #cecece; display: block; margin: 1rem 0 } .columns .cols>a i { margin: .2rem 1rem 1rem 0; float: left } .columns .title { display: block; overflow: hidden; font-weight: 300; padding: 0; font-size: 1.4rem; margin: 2rem 0 } .columns .link { margin: 1rem 0; display: block } .columns .link a { color: #cecece; font-weight: 300; display: inline; font-size: 1rem } .columns .link a:hover { color: #0b73ba } @media (max-width:1024px) { footer { padding: 2rem 0 } 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:last-child, .columns .cols:first-child { width: 100% } } .social-feed { display: block; overflow: hidden; margin: 0 } .social-feed a { display: inline-block; text-align: center; margin: 0 .4rem 0 0; overflow: hidden; position: relative; color: #999; 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 } .bottom { width: 100%; display: block; overflow: hidden; padding: 1rem 0; margin: 0; color: #fff; background-color: #111; font-size: 1rem; } .bottom .wrapper { display: block; width: 70%; margin: 0 auto; padding: 1rem 0; border-top: 2px solid #333; } .copyright { display: block; font-weight: 400; margin: 0; float: left; } .copyright p { color: #fff; margin: .4rem 0; padding: 0 } .webtasarim { display: block; margin: 0; float: right; } .webtasarim a { display: block; margin: 0 auto; color: #b6adad; } .webtasarim span { display: block; } @media (max-width:690px) { .bottom .wrapper { width: 90% } .copyright { float: none; text-align: center; padding: 0 5% } .webtasarim { float: none; text-align: center; } } .siteup { position: fixed; bottom: 2rem; right: -4rem; display: block; width: 4rem; height: 4rem; line-height: 4rem; font-size: 1rem; color: #fff !important; overflow: hidden; background: #1d1d1b; -webkit-transition: .3s; transition: .3s; z-index: 22; border-radius: 50%; text-align: center } .siteup.sticky { right: 2rem } @media (max-width:1024px) { .siteup { bottom: .4rem; width: 3rem; height: 3rem; line-height: 2.8rem; border-radius: .2rem; } .siteup.sticky { right: .4rem } } .whatsapp-button { display: inline-block; border-radius: 50%; color: #fff; border: .2rem solid #46c355; background-color: #46c355; padding: 0; text-align: center; width: 4rem; height: 4rem; line-height: 3.8rem; font-size: 2rem; position: relative; transition: all .25s ease-in-out; position: fixed; left: 2rem; bottom: 2rem; z-index: 32 } .whatsapp-button.mobile { display: none !important; } .whatsapp-button:hover { background-color: #46c355; color: #fff } .whatsapp-button:hover:before { animation: contact-button 1.5s ease-out infinite } .whatsapp-button:hover:after { animation: contact-button 1.5s ease-out .4s infinite } .whatsapp-button:after, .whatsapp-button:before { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; background-color: #46c355; width: 100%; height: 100%; border-radius: 50%; opacity: 0; transition: all .25s ease-in-out } @media (max-width:1024px) { .whatsapp-button { display: none !important; width: 3rem; height: 3rem; line-height: 2.8rem; border-radius: .2rem; font-size: 1.8rem; left: .4rem; bottom: .4rem; z-index: 22 } .whatsapp-button.mobile { display: block !important; } } @keyframes contact-button { 0% { opacity: .8; transform: scale(1) } 70% { opacity: 0; transform: scale(1.5) } 100% { opacity: 0 } } .lightbox { cursor: pointer; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 1); -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: -20px 0 0 -16px; position: absolute; top: 50%; 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 } .animation-element { opacity: 0; position: relative } .animation-element.anime-left { opacity: 0; transition: all .5s linear; transform: translate3d(-100px, 0, 0) } .animation-element.anime-left.in-view { opacity: 1; transform: translate3d(0, 0, 0) } .animation-element.anime-right { opacity: 0; transition: all .5s linear; transform: translate3d(100px, 0, 0) } .animation-element.anime-right.in-view { opacity: 1; transform: translate3d(0, 0, 0) } .animation-element.anime-top { opacity: 0; transition: all .5s .1s linear; transform: translate3d(0, 100px, 0) } .animation-element.anime-top.in-view { opacity: 1; transform: translate3d(0, 0, 0) } .animation-element.anime-bottom { opacity: 0; transition: all .5s .1s 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 .5s linear; transform: scale(0) } .animation-element.anime-zoom.in-view { opacity: 1; transform: scale(1) } .modal, .modal-box { z-index: 999999999 } .modalOverlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: 0 0 } .modal { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, .6); overflow: auto } .modal .modal-box { position: relative; max-width: 800px; margin: 4rem auto; animation-name: modalbox; animation-duration: .3s; animation-timing-function: ease-out; background-color: #fff; padding: 0; border-radius: 2px; overflow: hidden } .modal .modal-header { padding: 2rem 0; position: relative; display: block; text-align: center; overflow: hidden; color: #111; } .modal .modal-header h4 { font-size: 2rem; color: #111; font-weight: 300; margin: 0; padding: 0; } .modal .modal-header .close { display: block; width: 35px; height: 35px; overflow: hidden; text-align: center; line-height: 25px; border: none; padding: 0; margin: 1rem; position: absolute; top: 0; right: 0; background: #eee url(../svg/close.svg) center center no-repeat; background-size: 15px; opacity: .6; transition: .2s } .modal .modal-header .close:hover { opacity: 1 } .modal .modal-body { font-size: 16px; padding: 25px; color: #75818c } .modal .modal-footer { display: none; text-align: center; padding: 15px 0; background: #f7f7f7; border-top: 1px solid #eee } @media (max-width:1024px) { .modal .modal-box { width: 100%; height: 100vh; margin: 0; border-radius: 0 } }