/*! GENERATED by tools/build_css.py. Edit sources documented in tools/CSS_SOURCES.md. */
:root { --red01: #f30; --black: #000; --white: #fff; --white01: rgba(255, 255, 255, 0); --white02: rgba(255, 255, 255, .3); --transparent: transparent; --yellow01: #ffc107; --green01: #8bc34a; --purple01: #3b5998; --pink01: #d2837d; --blue01: #162934; --blue02: #037; --blue03: rgba(0, 160, 240, .3); --blue04: #1da1f2; --blue05: #e5f5fc; --gray01: #e3e3e3; --gray02: #7c7c7c; --gray03: #333; --gray04: rgba(0, 0, 0, .3) } body { height: 100%; padding: 0; margin: 0; background: var(--white); font-family: "Microsoft JhengHei", "微軟正黑體", Arial, 'Roboto Condensed', sans-serif } html, body { overflow: auto !important; } a { text-decoration: none; color: var(--white) } body a { transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; font-weight: 400 } input[type=button], input[type=submit] { transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all } p { margin: 0 } ul { margin: 0; padding: 0; list-style: none } label { margin: 0 } [canvas=container], [off-canvas] { padding: 10px 20px } [class*=js-] { cursor: pointer } .hide { display: none; } .w3_agile_login { float: right; margin-top: 9px } .w3_agile_login a i { color: var(--white); font-size: 1.5em; margin-top: .5em } .cd-main-header { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0) } .cd-main-header { -webkit-transition: -webkit-transform .3s; -moz-transition: -moz-transform .3s; transition: transform .3s } .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px) } .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible { -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px) } .cd-header-buttons { position: absolute; display: inline-block; top: 0; right: 0 } .cd-header-buttons li { display: inline-block } .cd-nav-trigger, .cd-search-trigger { position: relative; display: block; width: 44px; height: 44px; overflow: hidden; white-space: nowrap; color: var(--transparent); z-index: 3 } .cd-search-trigger::after, .cd-search-trigger::before { content: ''; position: absolute; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; transition: opacity .3s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden } .cd-search-trigger::before { top: 11px; left: 11px; width: 18px; height: 18px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 3px solid var(--gray03) } .cd-search-trigger::after { height: 3px; width: 8px; background: var(--gray03); bottom: 14px; right: 11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } .cd-search-trigger span { position: absolute; height: 100%; width: 100%; top: 0; left: 0 } .cd-search-trigger span::after, .cd-search-trigger span::before { content: ''; position: absolute; display: inline-block; height: 3px; width: 22px; top: 50%; margin-top: -2px; left: 50%; margin-left: -11px; background: var(--gray03); opacity: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity .3s, -webkit-transform .3s; -moz-transition: opacity .3s, -moz-transform .3s; transition: opacity .3s, transform .3s } .cd-search-trigger span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } .cd-search-trigger span::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) } .cd-search-trigger.search-is-visible::after, .cd-search-trigger.search-is-visible::before { -moz-opacity: 0; opacity: 0 } .cd-search-trigger.search-is-visible span::after, .cd-search-trigger.search-is-visible span::before { -moz-opacity: 1; opacity: 1 } .cd-search-trigger.search-is-visible span::before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg) } .cd-search-trigger.search-is-visible span::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } .cd-search { position: absolute; width: 100%; top: 100%; left: 0; z-index: 3; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s } .cd-search input { border-radius: 0; border: none; background: #0a0a0a; width: 100%; padding: 0 5%; -webkit-box-shadow: inset 0 1px 0 var(--gray01), 0 3px 6px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 1px 0 var(--gray01), 0 3px 6px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 var(--gray01), 0 3px 6px rgba(0, 0, 0, .05); -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; font-size: 1em; padding: 1em 2em; color: var(--white) } .cd-search input::-webkit-input-placeholder { color: var(--white) !important } .cd-search input::-moz-placeholder { color: var(--white) !important } .cd-search input:-moz-placeholder { color: var(--white) !important } .cd-search input:-ms-input-placeholder { color: var(--white) !important } .cd-search input:focus { outline: 0 } .cd-search.is-visible { -moz-opacity: 1; opacity: 1; visibility: visible; -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s } .main-slider { position: relative; overflow: hidden } header { padding: 0; background: #fff; position: fixed; left: 0; top: 0; width: 100%; z-index: 666 } header .container { display: flex; flex-wrap: wrap; align-items: center; width: 1240px; justify-content: space-between } header .container .logo { width: 280px; } header .container .logo img { width: 100%; height: auto; max-height: 65px; max-width: 270px; width: auto; } header .container .navbar.navbar-default { width: calc(100% - 280px) } header .container .navbar.navbar-default .container { width: 100%; padding: 0 } header .container .navbar.navbar-default .container .nav.navbar-nav { display: inline-flex; align-items: center } header .container .navbar.navbar-default .container .nav.navbar-nav > li { width: max-content; position: relative; } header .container .navbar.navbar-default .container .nav.navbar-nav > li > .dropdown-menu { width: max-content; min-width: 100%; } header .container .navbar.navbar-default .container .nav.navbar-nav > li > .dropdown-menu > li { width: 100%; } header .container .navbar.navbar-default .container .nav.navbar-nav > li > .dropdown-menu > li > a { white-space: nowrap; } header .container .navbar.navbar-default .container li.society { display: inline-flex } header .container .navbar.navbar-default .container li.society a img { width: 36px } header .container .navbar.navbar-default .container li.society a:hover { opacity: .6 } .society-div { text-align: right; padding-bottom: 5px; padding-right: 10px; display: none; } .society-div a { display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; border-radius: 100px; width: 30px; height: 30px; } .society-div a img { width: 20px; } .society-div a:hover { opacity: .6 } .society-div a:nth-child(1) { background-color: #00c300; } .society-div a:nth-child(2) { background-color: #0865fe; } .society-div a:nth-child(3) { background: #582bcd; background: -moz-linear-gradient(-45deg, #582bcd 0%, #ed4c33 50%, #f7d36f 100%); background: -webkit-linear-gradient(-45deg, #582bcd 0%, #ed4c33 50%, #f7d36f 100%); background: linear-gradient(135deg, #582bcd 0%, #ed4c33 50%, #f7d36f 100%); } .logo a { font-size: 40px; text-decoration: none; color: #0a0a0a; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; display: flex; } .logo p { font-size: 21px; color: var(--gray03); margin: 0 0; font-weight: 800; letter-spacing: 5px } .w3ls-social-icons { margin-top: 20px; text-align: center } .w3ls-social i, .w3ls-social-icons i { font-size: 16px; margin: 0 10px; color: var(--gray01); transition: .5s all; -webkit-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; -moz-transition: .5s all } .w3ls-social i:hover, .w3ls-social-icons i:hover { color: #0a0a0a; transition: .5s all; -webkit-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; -moz-transition: .5s all } .logo { text-align: center } .agileits-contact-info { margin-top: 9px; float: right; margin-right: 15px } .agileits-contact-info ul li { display: inline-block; font-size: 17px; color: var(--black) } .agileits-contact-info ul li span { left: -.5em; color: #0a0a0a } .agileits-contact-info ul li:nth-child(2) { margin-left: 25px } .agileits-contact-info ul li a { color: var(--black); vertical-align: text-bottom } .agileits-contact-info ul li a:hover { color: #0a0a0a } .wrapper {  padding-top: 0px; margin-top: 82px; } #sidebar { background: var(--white); color: var(--gray02);  padding-top: 77px } #sidebar.active { margin-left: 0 } #sidebar .navbar-nav { margin: 0 auto; width: 100% } #sidebar .collapse { padding-left: 10px; } #sidebar .collapse li { border: 0 } #sidebar .collapse>li>a { text-align: left } #sidebar .navbar-nav>li { border-bottom: 1px solid var(--gray01) } #sidebar .sidebar-header { padding: 20px; background: #0a0a0a } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid var(--gray03) } #sidebar ul p { color: var(--white); padding: 10px } #sidebar ul li>a { padding: 15px 20px; font-size: 1.1em; display: block; color: #000; text-align: left; } #sidebar ul li a:hover { color: #0a0a0a; background: var(--white) } #sidebar a[aria-expanded=true], #sidebar ul li.active>a { color: var(--white); background: var(--blue02) } #sidebar a[data-toggle=collapse] { position: relative } #sidebar a[aria-expanded=false]::before, #sidebar a[aria-expanded=true]::before { content: ''; display: block; position: absolute; right: 20px; font-family: 'Glyphicons Halflings'; font-size: .6em } #sidebar a[aria-expanded=true]::before { content: '' } #sd-search { background: var(--gray01); padding: 10px; box-shadow: -2px 2px 6px -2px var(--gray03) inset } #sd-search form { border: 1px solid var(--gray01); border-radius: 5px; padding: 5px; background: var(--white) } #sd-search form button[type=submit], #sd-search form input[type=search] { background-color: var(--transparent); border: 0; outline: 0 } #sd-search form input[type=search] { width: calc(100% - 22px) } #sd-search form button[type=submit] { width: 18px; height: 18px; display: inline-block; text-align: center; padding: 0 } #pageContent.active { right: -250px } #abgne_float_ad {  right: 0; z-index: 300; width: 90px; position: fixed; bottom: 50%; overflow: hidden; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } #abgne_float_ad img { border: none; width: 100%; height: auto; } #abgne_float_ad a { display: inline-flex; width: 90px; height: 90px; align-items: center; justify-content: center; margin: -1px 0; overflow: hidden; border-radius: 100px; }  .agileinfo-dot { background: none repeat 0 0; background-size: 2px; -webkit-background-size: 2px; -moz-background-size: 2px; -o-background-size: 2px; -ms-background-size: 2px; padding: 1em 0 } .cb-slideshow, .cb-slideshow:after { width: 100%; height: 100%; top: 0; left: 0; z-index: 0; overflow: visible } .cb-slideshow:after { content: ''; background: var(--transparent) none repeat top left } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: var(--transparent); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-position: 50% 50%; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s } .cb-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center; opacity: 0; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s } .cb-slideshow li div h3 { font-size: 200px; padding: 0; color: var(--white) } .cb-slideshow li:nth-child(1) span { background-image: none } .cb-slideshow li:nth-child(2) span { background-image: none; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s } .cb-slideshow li:nth-child(3) span { background-image: none; -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s } .cb-slideshow li:nth-child(4) span { background-image: none; -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s } .cb-slideshow li:nth-child(5) span { background-image: none; -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s } .cb-slideshow li:nth-child(6) span { background-image: none; -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s } .cb-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s } .cb-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s } .cb-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s } .cb-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s } .cb-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s } .no-cssanimations .cb-slideshow li span { opacity: 1 } .navbar-default { background-color: var(--transparent); border-color: var(--transparent) } .navbar { margin-bottom: 0 } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border: none; float: left; width: 100%; margin-top: 0px; } .navbar-nav { float: none; text-align: center } .navbar-nav>li { display: inline-block; float: none } .navbar-default .navbar-nav>li>a { font-size: 14px; color: #888; font-weight: 500; letter-spacing: 1px; padding: 30px 8px; } .navbar-default .navbar-nav>li>a:hover{ background-color: #000; color: #fff !important; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>li>a.active, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #888; } .navbar { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0 } .dropdown-menu { border-top: none; top: auto; } .dropdown-menu>li:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, .15) } .dropdown-menu>li>a { display: block; text-align: center; letter-spacing: 2px; font-size: 14px; padding: 6px 20px; color: #000; } .navbar-nav>li>.dropdown-menu { padding: 0 } .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { color: var(--pink01); text-decoration: none;  background-color: #fff; font-weight: 600; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .dropdown-menu { border-radius: 0 } .dropdown .caret { width: 8px; height: 8px; background-image: none; background-position: center; background-repeat: no-repeat; background-size: 100% auto; border: none; } section { margin: 50px 0; } .text-center { text-align: center } p { margin: .5em 0; font-size: 16px; line-height: 2em; letter-spacing: 3px } .section_head h3 { font-size: 1.5em; padding-bottom: 0.8em; font-weight: 700; letter-spacing: 5px; text-align: center; position: relative; color: #0a0a0a; } .section_head h2{ font-size: 1.5em; padding-bottom: 0.8em; font-weight: 700; letter-spacing: 5px; text-align: center; position: relative; color: #0a0a0a; } .section_head h2::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background-color: #C5212A; bottom: -6px; left: 50%; transform: translateX(-50%); position: absolute; } .section_head h2::after{ content: ''; width: 250px; height: 1px; background-color: #C5212A; bottom: 0; left: 50%; transform: translateX(-50%); position: absolute; } .section_title { border-bottom: 1px solid var(--gray02); font-size: 1.6em; margin: 15px 0 30px } .section_title b { display: inline-block; border-bottom: 5px solid var(--gray02); font-weight: 400; letter-spacing: 2px; position: relative; top: 1px } .section_head + .owl-list{ margin-top: 30px; } .owl-list { display: flex; flex-wrap: wrap; position: relative; margin-left: -10px; margin-right: -10px; } .owl-list a { text-decoration: none; color: var(--blue02); font-weight: 500; position: relative; width: calc(100% - 20px); } .owl-list a p { margin: .5em 0; font-size: 1.3em; line-height: 1.3; letter-spacing: 2px;  } .owl-list a:hover P { opacity: 1 } .owl-list .img_grid { margin: 10px; width: calc(100%/4 - 20px); position: relative; display: flex; background-color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } .owl-list .img_grid .serviceinfo_agile .img { overflow: hidden; position: relative; } .owl-list .img_grid .new { position: absolute; right: 0; top: 8px; color: #fff; font-size: 13px; background-color: #E46E6E; padding: 2px; } .owl-list .img_grid .serviceinfo_agile:hover .img:after { width: calc(100% - 30px); } .owl-list .img_grid a{ display: block; } .owl-list .img_grid a:hover .img img{ transition: .5s ease; } .owl-list .img_grid a:hover .img img{ -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } .owl-list .img_grid .info{ transition: .5s ease; } .owl-list .img_grid a:hover .info { margin-top: -10px; } .img_grid { margin: 2% 0 0; overflow: hidden } .img_grid a {  position: relative; z-index: 99; margin: 10px; overflow: hidden; transition: .5s ease; color: #000; } .img_grid a .ih-item { position: relative; z-index: 1; overflow: hidden; width: 100%; } .ih-item { position: relative; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; transition: all .35s ease-in-out } .ih-item, .ih-item * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .ih-item a { color: var(--gray03) } .ih-item img { width: 100%; height: auto } .ih-item.circle { position: relative; display: inline-block } .ih-item.circle .img { position: relative; width: 100% } .ih-item.circle.effect17 .info { padding: 15px; } .ih-item.circle.effect17 .info h3 { color: #0a0a0a; position: relative; font-size: 1.3em; min-height: 50px; text-align: left; } .ih-item.circle.effect17 .info p { color: #777777; font-size: 1em; text-align: left; margin: 0; min-height: 38px; } .ih-item.circle.effect17 .info .glyphicon{ display: block; color: #C5212A; border: 1px solid #C5212A; padding: 10px; } .ih-item.circle.effect17 .info .glyphicon:hover{ color: #fff; background-color: #C5212A; } .ih-item.circle.effect17:hover .img:before { box-shadow: inset 0 0 0 120px var(--blue03), inset 0 0 0 16px var(--blue03), 0 1px 2px var(--blue03) } .ih-item.circle.effect17:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .ih-item.circle.effect17:hover .info p { opacity: 1 } ul.dates li { border-bottom: 1px solid var(--gray02); position: relative; padding: 1em 0 6.75em 6.75em } ul.dates .date { display: block; position: absolute; left: 0; top: 1.3em; background-color: #0a0a0a; height: 3.5em; color: var(--white); line-height: 1em; border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding: .5em .75em 0 1em } ul.dates .date:after { content: ''; position: absolute; bottom: -1px; right: -1.2em; border-left: solid 1.25em #0a0a0a; border-top: solid 1.8em var(--transparent); border-bottom: solid 1.8em var(--transparent) } ul.dates .date strong { display: block; font-size: 1.75em; padding-top: .35em; padding-left: .75em } ul.dates .img { float: left; padding-right: 10px; width: 177px; height: 177px; overflow: hidden; position: relative } ul.dates .img img { width: 100%; max-width: 100% } ul.dates h4 { color: #0a0a0a; font-weight: 600; line-height: 1.1em; min-height: 1.1em } ul.dates a:hover h4 { color: var(--gray02) } ul.dates p { margin: .5em 0 0 0; color: var(--gray03); line-height: 1.6em; min-height: 1.6em } ul.dates a { text-decoration: none } #home-case { background: none center; background-size: cover; padding: 40px 0 } .features { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 75%; margin: 20px auto 0 } .features article { flex: 1; margin-bottom: 38px; position: relative; max-width: 240px } .features article a { -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; position: relative; text-decoration: none; transition: none } .features article:nth-child(2n) { margin-left: calc(100% - 480px) } .features article:nth-last-child(1), .features article:nth-last-child(2) { margin-bottom: 0 } .icon { text-decoration: none; border-bottom: none; position: relative } .features article .icon { -moz-flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0; -moz-flex-shrink: 0; -webkit-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; display: block; height: 100px; line-height: 12em; margin: 0 1em 0 0; text-align: center; width: 100px } .diamond { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-radius: .25rem; background: #0a0a0a; display: block; width: 72px; height: 72px; margin: -3.5em 0 0 -3.5em; position: absolute; top: 60%; left: 60% } .diamond:after { border-radius: .25rem; border: solid 2px var(--gray01); content: ''; display: block; width: 66px; height: 66px; left: 50%; margin: -33px 0 0 -33px; position: absolute; top: 50% } .diamond img { -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: -52px } .features article .content { -moz-flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; -ms-flex-shrink: 1; flex-shrink: 1; width: 200px } .features article .content h4 { color: var(--gray02); font-weight: 600; letter-spacing: 3px; font-size: 1.6em } .features article a:hover .content h4 { color: #0a0a0a } .features article .content h3 { color: var(--gray02) } .owl-photo div.item { display: inline-block; width: calc(98%/4); margin: 1em 0; text-align: center } .owl-photo div.item img { width: auto; max-width: 100%; max-height: 100px } ul.simplefilter { text-align: center; margin-bottom: 2em } .section_head + .simplefilter{ margin-top: 50px; } .simplefilter li { color: var(--blue02); cursor: pointer; display: inline-block; text-transform: uppercase; padding: 8px 18px; margin: 0 .3em; border: 2px solid #e7e7e7; color: #666666; border-radius: 0px; letter-spacing: 2px } .simplefilter li { background-color: var(--white) } .simplefilter li a { color: #666666; } .simplefilter li.active, .simplefilter li:hover { border: 2px solid #0a0a0a; } .simplefilter li:hover a { color: #0a0a0a; text-decoration: none; } .simplefilter li.active a, .simplefilter li:active a { color: #0a0a0a; } .filtr-item { padding: 15px; } .agileits_portfolio_grid { position: relative;  } .agileits_portfolio_grid.service { width: 100%; height: 0; padding-bottom: 120%; } .agileits_portfolio_grid a { display: block; margin: 0; height: fit-content; } .agileits_portfolio_grid a:hover { text-decoration: none; } .agileits_portfolio_grid a:hover .img img { transform: scale(1.1); } .agileits_portfolio_grid a img {  width: 100%; transition: .5s all; } .agileits_portfolio_grid a h2 {  color: #000; font-size: 14px; letter-spacing: 0; text-align: center; } .agileits_portfolio_grid a img { height: 100% } ul.dates li p.more em a { background: #0a0a0a } .pagination { display: inline-block } .pagination a { color: var(--black); float: left; padding: 5px 10px; text-decoration: none; transition: background-color .3s; border: 1px solid var(--blue02); margin: 0 4px } .pagination a.active { background-color: var(--blue02); color: var(--white); border: 1px solid var(--blue02) } .pagination a:hover:not(.active) { background-color: var(--gray01) } .gallery-grids, .gallery-grids:active { padding: 0 } .gallery-box { display: block; overflow: hidden; width: 100%; position: relative } .gallery-box.case { height: 0; padding-bottom: 71.25% } .gallery-box .mask { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; background: var(--gray02); width: 100%; height: 100%; color: var(--white); font-size: 1.3em; font-weight: 600; text-decoration: none; letter-spacing: 6px; opacity: 0; animation: fadeOut .4s ease-in both; z-index: 2 } .gallery-box:hover .mask { animation: fadeIn .4s ease-in both } .gallery-box.case img { width: 100%; height: 100%; position: absolute } .section_head + .filtr-container{ margin-top: 35px; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 }} @keyframes fadeOut { from { opacity: 1 } to { opacity: 0 }} .banner-bottom { padding: 5em 0 } .agile-map { margin: 3em 0 } .agile-map iframe { width: 100%; min-height: 400px } .input { position: relative; z-index: 1; display: inline-block; margin: 0; width: 100%; vertical-align: top } .w3_agile_mail_grids input { display: inline-block; padding: 1.2em 1em; color: var(--gray04); font-size: 14px; width: 100%; height: 100%; background: var(--gray01); border: 1px solid var(--gray01); outline: 0; margin-top: 2em } .input__field { position: relative; display: block; float: right; padding: .8em; width: 60%; border: none; border-radius: 0; background: var(--gray01); color: var(--gray02) } .input__field:focus { outline: 0 } .input__label { display: inline-block; float: right; padding: 0 1em; width: 40%; color: var(--gray04); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .input__label-content { position: relative; display: block; padding: 1.3em 0; width: 100% } .agile-map+div>h4 { color: #0a0a0a; font-size: 1.5em; font-weight: 600 } .agile-map+div>p { margin: 10px 0 } .w3agile-middle ul li { display: inline-block; margin-right: 20px } .w3agile-middle ul li a { color: var(--gray03); font-size: 14px; text-decoration: none; font-weight: 600 } .w3agile-middle ul li a:hover { color: #0a0a0a } .agile-top { position: relative } .w3agile-middle { width: 50%; background: var(--white); padding: 18px; position: absolute; bottom: 0 } .w3agile-middle i { padding-right: 8px } .agileits_popular_posts_grid i, .w3ls_recent_posts i { padding-right: 8px } .w3agile-bottom { padding: 40px 0 } .w3agile-right { border-left: 1px solid var(--gray02) } .w3agile-left h5 { font-size: 20px; line-height: 28px; text-transform: uppercase; color: var(--gray03) } .w3agile-right h3 { font-size: 25px; text-transform: uppercase; letter-spacing: 1px } .w3agile-right h3 a { color: var(--gray04); font-weight: 600; text-decoration: none } .w3agile-right h3 a:hover { color: #0a0a0a } .w3agile-right p { font-size: 14px; color: var(--gray03); margin: 20px 0; line-height: 26px } a.agileits.w3layouts { font-weight: 600; color: var(--white); padding: 9px 25px; background-color: #0a0a0a; margin-top: 9px; letter-spacing: 1px; display: inline-block; text-decoration: none; font-size: 16px; border: 1px solid #0a0a0a } a.agileits.w3layouts:hover { border: 1px solid #0a0a0a; color: #0a0a0a; background: 0 0 } span.glyphicon.agileits.w3layouts.glyphicon-arrow-right { padding-left: 6px; top: 2px } .w3agile-right { padding-left: 30px; padding-right: 0 } .agile-top iframe { width: 100%; min-height: 435px } .w3-rgt-top1 { margin-top: 1em } .w3-lft { padding-left: 0 } .w3-rgt { padding-right: 0 } .wthreesearch input[type=search] { border: 1px solid var(--black); padding: 5px 10px; color: var(--black); outline: 0; width: 85% } l.wthreesearch input[type=search]:active, li.wthreesearch input[type=search]:focus { border-width: 2px } .wthreesearch .btn-default { color: var(--black); border-color: var(--black); border-radius: 0; padding: 5px 10px } .wthreesearch { margin-bottom: 4em } .wthreesearch .btn-default:hover { background-color: var(--black); color: var(--white) } .agile_author, .w3ls_recent_posts { margin: 4em 0 } .w3agile_blog_left h3 { text-transform: uppercase; font-size: 1.4em; color: var(--gray04); padding-left: .8em; border-left: 3px solid #0a0a0a; font-weight: 600 } .pa_italic i { left: -1em; font-size: 11px } .pa_italic span { display: none } .collapsed span { display: inline-block; left: -1em; font-size: 11px } .collapsed i { display: none } .panel-heading { padding: 10px 35px } .panel-title { font-size: 1em; color: var(--white); text-transform: capitalize; text-decoration: none } .panel-default { border-color: var(--white); background: var(--gray01) } .panel-default>.panel-heading { border-color: var(--white); color: var(--white); background-color: var(--gray02) } .panel-body { padding: 2em; font-size: 14px; line-height: 2em; color: var(--gray02) } a.pa_italic label { cursor: pointer; font-weight: 500 } a.pa_italic:focus { outline: 0; text-decoration: none } .panel-default>.panel-heading+.panel-collapse>.panel-body { border-top-color: var(--transparent) } .wthree_panel { margin: 2em 0 0 } .agileits_recent_posts_gridl { float: left; width: 30% } .agileits_recent_posts_gridr { float: right; width: 65% } .agileits_recent_posts_gridr h4 a, .w3ls_popular_posts h4 a { font-size: 1em; text-decoration: none; color: var(--gray04); line-height: 1.5em; font-weight: 600; text-transform: capitalize } .agileits_recent_posts_gridr h4 a:hover, .w3ls_popular_posts h4 a:hover { color: #0a0a0a } .agileits_recent_posts_gridr ul li { display: inline-block; margin-right: 1.5em; color: var(--gray02) } .agileits_recent_posts_gridr ul li:last-child { margin: 0 } .w3ls_popular_posts { margin-top: 4em } .w3ls_popular_posts h4 { margin: 10px 0 } .agileits_popular_posts_grid { margin-top: 2em } .w3l_categories { margin-top: 4em } ul.tag { margin-top: 2em } ul.tag li { display: inline-block; margin-top: 6px; margin-right: 3px } ul.tag li a { display: inline-block; padding: 7px 13px 5px; font-size: 14px; color: var(--gray03); border: 1px solid var(--gray01); letter-spacing: .1em; text-transform: uppercase; text-decoration: none } ul.tag li a:hover { background: #0a0a0a; color: var(--white) } .agileits_recent_posts_gridr ul li span { padding-right: .5em; color: #0a0a0a } .agileits_recent_posts_gridr ul li a { color: var(--gray02); text-decoration: none } .agileits_recent_posts_gridr ul li a:hover { color: #0a0a0a } .agileits_recent_posts_gridr h4 { margin: 0 0 .5em } .agileits_recent_posts_grid:nth-child(2) { margin: 2em 0 1em } .agileits_recent_posts_grid:nth-child(3) { margin: 0 0 1em } .w3l_categories ul { padding: 2em 0 0 } .w3l_categories ul li { display: block; margin-bottom: 1.5em } .w3l_categories ul li:last-child { margin: 0 } .w3l_categories ul li a { color: var(--gray04); text-transform: capitalize; text-decoration: none } .w3l_categories ul li a:hover { color: #0a0a0a } .w3l_categories ul li a span { padding-right: 1em; color: #0a0a0a } .agileinfo_calender_grid { margin: 2em 0 0 } .agileits_comment, .wthree_faq { margin: 3em 0 0 } .w3ls-social-1 i, .w3ls-social-icons-1 i { font-size: 15px; border: 1px solid var(--gray04); padding: 8px 10px; color: var(--gray04); transition: .5s all; -webkit-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; -moz-transition: .5s all } .w3ls-socia-1 i:hover, .w3ls-social-icons-1 i:hover { background: 0 0; background: #0a0a0a; border: 1px solid #0a0a0a; color: var(--white); transition: .5s all; -webkit-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; -moz-transition: .5s all } .w3agile_blog_left { padding-right: 0 } .w3ls-social-icons-1 { margin-top: 2em } .w3agile_blog_left { padding-right: 0; float: right; width: 25% } #toTop { text-decoration: none; display: block } .page-top { border-right: 3px solid var(--white); border-top: 3px solid var(--white); height: 65px; width: 65px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); display: inline-block; border-left: 2px solid var(--transparent); border-bottom: 2px solid var(--transparent) } .page-top+p { margin-top: -60px; color: var(--white); padding-left: 5px } .w3agile-list ul { margin: 0; padding: 0 } .w3agile-list ul li { display: inline-block; margin: 0 2em } .w3agile-list ul li a { color: var(--gray02); font-size: 18px; text-decoration: none } .w3agile-list ul li a:hover { color: #0a0a0a } .agileinfo p { color: var(--white); font-size: 13px; margin: 0; letter-spacing: 0; font-weight: 600 } .agileinfo p a { color: #0a0a0a } .agileinfo p a:hover { color: var(--white) } .w3agile_special_deals_grid_left_grid { position: relative; overflow: hidden } .w3agile_special_deals_grid_left_grid img { -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; width: 100% } .w3agile_special_deals_grid_left_grid:hover img { -moz-transform: scale3d(1.1, 1.1, 1); -o-transform: scale3d(1.1, 1.1, 1); -ms-transform: scale3d(1.1, 1.1, 1); -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1) } .agile-banner { background: none no-repeat 0 0; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 250px } .wthree_head { font-size: 2.5em; color: var(--gray04); text-transform: uppercase; text-align: center; letter-spacing: 2px; font-weight: 600; margin: 0 0 0 } .agileinfo_para { color: var(--gray02); text-align: center; margin: 20px 0 0 } .input--ichiro { margin-top: 2em } .input__field--ichiro { position: absolute; top: 4px; left: 4px; z-index: 100; display: block; padding: 0 1em; width: calc(100% - 8px); height: calc(100% - 8px); background: var(--white); color: var(--gray04); opacity: 0; -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, transform .3s } .input__label--ichiro { width: 100%; text-align: left; cursor: text } .input__label--ichiro::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gray01); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: -webkit-transform .3s; transition: transform .3s; border: 1px solid var(--gray01) } .input__label-content--ichiro { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: -webkit-transform .3s; transition: transform .3s } .input--filled .input__field--ichiro, .input__field--ichiro:focus { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } .input--filled .input__label--ichiro, .input__field--ichiro:focus+.input__label--ichiro { cursor: default; pointer-events: none } .input--filled .input__label--ichiro::before, .input__field--ichiro:focus+.input__label--ichiro::before { -webkit-transform: scale3d(1, 1.5, 1); transform: scale3d(1, 1.5, 1); border: none } .input--filled .input__label-content--ichiro, .input__field--ichiro:focus+.input__label--ichiro .input__label-content--ichiro { -webkit-transform: translate3d(0, -2.9em, 0) scale3d(.8, .8, 1); transform: translate3d(0, -2.9em, 0) scale3d(.8, .8, 1) translateZ(1px) } .input_box_grid textarea { outline: 0; width: 100%; background: var(--gray01); color: var(--gray04); padding: 10px; font-size: 14px; border: 1px solid var(--gray01); min-height: 300px; margin: 2em 0 0; overflow: hidden } .input_box_grid textarea::-webkit-input-placeholder { color: var(--gray04) !important } .input_box_grid input[type=reset], .input_box_grid input[type=submit] { outline: 0; width: 100%; background: #0a0a0a; color: var(--white); padding: 1em 0; font-size: 1em; font-weight: 700; border: none; text-transform: uppercase; margin: 2em 0 0; letter-spacing: 5px; border-radius: 8px } .input_box_grid input[type=reset] { background: var(--gray02) } .input_box_grid input[type=reset]:hover, .input_box_grid input[type=submit]:hover { background: #0a0a0a } .breadcrumb1 li span { left: 0; padding-right: 1em; color: #0a0a0a } .breadcrumbs { padding: 1.5em 0; background: #0a0a0a } .breadcrumb { margin-bottom: 0 !important; padding: 0 !important; background-color: #0a0a0a !important } .breadcrumb1 li { font-size: 1.3em; color: var(--gray02) } .breadcrumb1 li a { color: var(--white); text-decoration: none } .breadcrumb>.active { color: var(--gray04) !important } ul.bs-glyphicons-list li:hover { background: var(--black); transition: .5s all; -webkit-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; -moz-transition: .5s all } ul.bs-glyphicons-list li:hover span { color: var(--white) } .codes a { color: var(--gray02) } .row.fontawesome-icon-list { margin: 0 } .icon-box { padding: 8px 15px; background: var(--gray03); margin: 1em 0 1em 0; border: 5px solid var(--white); text-align: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 13px; transition: .5s all; -webkit-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; -moz-transition: .5s all; cursor: pointer } .icon-box:hover { background: var(--black); transition: .5s all; -webkit-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; -moz-transition: .5s all } .icon-box:hover i.fa { color: var(--white) !important } .icon-box:hover a.agile-icon { color: var(--white) !important } .codes .bs-glyphicons li { float: left; width: 12.5%; height: 115px; padding: 10px; line-height: 1.4; text-align: center; font-size: 12px; list-style-type: none } .codes .bs-glyphicons .glyphicon { margin-top: 5px; margin-bottom: 10px; font-size: 24px } .codes .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--gray03) } .codes .bs-glyphicons .glyphicon-class { display: block; text-align: center; word-wrap: break-word } h3.icon-subheading { font-size: 25px; color: #0a0a0a !important; margin: 30px 0 15px } h3.agileits-icons-title { text-align: center; font-size: 30px; color: var(--black) } .agileits_hea { margin-top: 5em } .icons a { color: var(--gray02) } .icon-box i { margin-right: 10px !important; font-size: 20px !important; color: var(--gray03) !important } .bs-glyphicons li { float: left; width: 18%; height: 115px; padding: 10px; line-height: 1.4; text-align: center; font-size: 12px; list-style-type: none; background: var(--gray03); margin: 1%; cursor: pointer } .bs-glyphicons .glyphicon { margin-top: 5px; margin-bottom: 10px; font-size: 24px; color: var(--gray03) } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--gray03) } .bs-glyphicons .glyphicon-class { display: block; text-align: center; word-wrap: break-word } .grid_3.grid_4.w3layouts { margin: 0 } .well { font-weight: 300; font-size: 14px } .list-group-item { font-weight: 300; font-size: 14px } li.list-group-item1 { font-size: 14px; font-weight: 300 } .typo p { margin: 0; font-size: 14px; font-weight: 300 } .show-grid [class^=col-] { background: var(--white); text-align: center; margin-bottom: 10px; line-height: 2em; border: 10px solid var(--gray01) } .show-grid [class*=col-]:hover { background: var(--gray01) } .grid_3 { margin-bottom: 2em } .xs h3, h3.m_1 { color: var(--black); font-size: 1.7em; font-weight: 300; margin-bottom: 1em } .grid_3 p { color: var(--gray02); font-size: .85em; margin-bottom: 1em; font-weight: 300 } .grid_4 { background: 0 0; margin-top: 50px } .label { font-weight: 300 !important; border-radius: 4px } .grid_5 { background: 0 0; padding: 2em 0 } .grid_5 h1, .grid_5 h2, .grid_5 h3, .grid_5 h4, .grid_5 h5, h3.bars, h3.hdg { margin-bottom: 1em; color: #0a0a0a } .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { border-top: none !important } .tab-content>.active { display: block; visibility: visible } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { z-index: 0 } .badge-primary { background-color: #0a0a0a } .badge-success { background-color: var(--green01) } .badge-warning { background-color: var(--yellow01) } .badge-danger { background-color: var(--red01) } .grid_3 p { line-height: 2em; color: var(--gray02); font-size: .9em; margin-bottom: 1em; font-weight: 300 } .bs-docs-example { margin: 1em 0 } section#tables p { margin-top: 1em } .tab-container .tab-content { border-radius: 0 2px 2px 2px; border: 1px solid var(--gray01); padding: 16px; background-color: var(--white) } .table td, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { padding: 15px !important } .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { font-size: .9em; color: var(--gray02); border-top: none !important; background-color: var(--white) } .tab-content>.active { display: block; visibility: visible } .label { font-weight: 300 !important } .label { padding: 4px 6px; border: none; text-shadow: none } .alert { font-size: .85em } h1.t-button, h2.t-button, h3.t-button, h4.t-button, h5.t-button { line-height: 2em; margin-top: .5em; margin-bottom: .5em } li.list-group-item1 { line-height: 2.5em } .input-group { margin-bottom: 20px } .in-gp-tl { padding: 0 } .in-gp-tb { padding-right: 0 } .list-group { margin-bottom: 48px } ol { margin-bottom: 44px } h2.typoh2 { margin: 0 0 10px } #home-car-glass { background-color: var(--white); padding: 5em 0; margin: 0 } #home-car-glass .owl-car-glass { position: relative } #home-car-glass .owl-car-glass .item { background-color: var(--white); text-align: center; height: 150px; display: flex; align-items: center; justify-content: center; margin: 10px } #home-car-glass .owl-car-glass .item img { max-width: 80%; height: auto } #home-car-glass .owl-car-glass .owl-dots { display: none } #home-car-glass .owl-car-glass .owl-nav button { position: absolute; top: calc(50% - 25px); width: 25px; height: 50px } #home-car-glass .owl-car-glass .owl-nav button span { display: none } #home-car-glass .owl-car-glass .owl-nav .owl-prev { left: -50px; background-image: none; background-position: center; background-repeat: no-repeat } #home-car-glass .owl-car-glass .owl-nav .owl-next { right: -50px; margin-left: 0; background-image: none; background-position: center; background-repeat: no-repeat } #home-car-glass .remark { text-align: center } #home-car-glass .remark p { font-size: 18px } #home-car-glass .remark p span { display: block } #home-car-glass .remark a { font-size: 14px; color: #0a0a0a } #home-service-address { padding: 5em 0; background-image: none; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; margin: 0 } #home-service-address .section_head h3 { color: var(--white) } #home-service-address .map-div { display: flex; flex-wrap: wrap } #home-service-address .map-div .item { width: calc(100%/3 - 40px - 2px); margin: 20px; border: 1px solid var(--gray01); padding: 10px; background-color: var(--white) } #home-service-address .map-div .item .map iframe { width: 100%; height: 200px } #home-service-address .map-div .item .info h3 { text-align: center; color: #0a0a0a; font-size: 28px; margin-top: 20px; font-weight: 700 } #home-service-address .map-div .item .info p { font-size: 16px; color: var(--black); line-height: 1.8; letter-spacing: 0 } .single-left1 h3 { margin: 2em 0 1em; text-transform: uppercase; letter-spacing: 2px; font-size: 1.5em; font-weight: 600; color: var(--gray04); line-height: 1.5em } .single-left1 ul li { display: inline-block; margin-right: 3em } .single-left1 ul li span { color: #0a0a0a; padding-right: 1em } .single-left1 ul li a { color: var(--gray02); font-style: italic; text-decoration: none } .single-left1 ul li a:hover { color: #0a0a0a } .single-left1 ul { text-align: left } .single-left1 p { margin: 2em 0; color: var(--gray02); line-height: 2em } .single-left1 p i { color: var(--gray04); margin: 1em 0; display: block } .admin { padding: 2em; background: var(--gray04); margin: 3em 0 } .admin p { color: var(--gray01); margin: 0; line-height: 2em; position: relative; padding-left: 3.5em } .admin p:before { position: absolute; top: 0; left: 0; content: ""; font-family: FontAwesome; font-size: 2em } .admin a { display: block; text-align: right; color: #0a0a0a; font-size: 1em; text-decoration: none } .admin a:hover { color: var(--white) } .comments-grids { margin: 3em 0 0 } .comments-grid-left { float: left; width: 15% } .comments-grid-left img { padding: .3em; border: 2px solid #0a0a0a; border-radius: 50px } .comments-grid-right { float: right; width: 75% } .comments-grid-right ul { padding: 1em 0 } .comments-grid-right ul li { display: inline-block; color: var(--gray02); text-transform: uppercase; font-weight: 600 } .comments-grid-right ul li i { margin: 0 1em; font-style: normal } .comments-grid-right ul li a { color: #0a0a0a; text-decoration: none } .comments-grid-right ul li a:hover { color: var(--gray02) } .comments-grid-right h4 a { font-size: 1em; color: var(--black); text-decoration: none; text-transform: uppercase } .comments-grid-right h4 a:hover { color: #0a0a0a } .comments-grid-right p { font-size: 14px; color: var(--gray02); line-height: 1.8em; margin: 0 } .comments-grid:nth-child(2) { margin: 2em 0 } .comments-grid:nth-child(3) { margin: 0 0 2em } .leave-coment-form { margin: 3em 0 0 } .leave-coment-form input[type=email], .leave-coment-form input[type=text], .leave-coment-form textarea { outline: 0; border: 2px solid var(--gray01); background: 0 0; padding: 10px; font-size: 13px; color: var(--gray04); width: 48.82% } .leave-coment-form input[type=email] { margin-left: 1em } .leave-coment-form textarea { min-height: 200px; resize: none; width: 100% !important; margin: 1em 0 .8em } .w3_single_submit { text-align: right } .leave-coment-form input[type=submit] { outline: 0; border: none; background: #0a0a0a; padding: 10px 0; font-size: 14px; text-transform: uppercase; font-weight: 600; color: var(--white); letter-spacing: 2px; width: 35% } .leave-coment-form input[type=submit]:hover { background: var(--gray04) } .leave-coment-form form { margin: 3em 0 0 } .agileits_w3layouts_work_grid { padding-left: 0 } .single-left2-left ul li { display: block } .single-left2-left ul li i { padding-right: 1.5em; color: #0a0a0a } .single-left2-left ul li a { color: var(--gray02); text-decoration: none; font-size: 15px; line-height: 30px } .agile_classes_grid1_left h4 { font-size: 1.4em; color: var(--gray04); text-transform: uppercase; font-weight: 600; letter-spacing: 2px } .agile_classes_grid1_left p { color: var(--gray02); line-height: 2em; margin: 1em 0 0 } .agileits_w3layouts_classes_grid1_right { width: 80px; height: 80px; border-radius: 80px; text-align: center; background: #0a0a0a; margin: 0 auto } .agileits_w3layouts_classes_grid1_right i { line-height: 2.8em; font-size: 2em; color: var(--white) } .agile_classes_grid1 { padding: 20px; border: 1px solid var(--gray01); margin-top: 20px } .w3_agile_classes_grid { padding-top: 5.5em } .w3_agile_classes_grid_middle img { margin: 0 auto } .agile_classes_grid1_left { padding: 0 } .agile_classes_grid1_right { padding-left: 0 } .agile_services_grid { position: relative } .agile_services_grid_pos { position: absolute; bottom: -13%; left: 5%; width: 55px; height: 55px; background: #0a0a0a; border-radius: 50px; border: 2px solid var(--white); text-align: center } .w3_agile_services_grid:hover .agile_services_grid_pos { background: var(--gray04) } .agile_services_grid_pos i { font-size: 1.3em; color: var(--white); line-height: 2.7em } .w3_agile_services_grid h4 { font-size: 1.3em; letter-spacing: 2px; color: var(--gray04); font-weight: 600; margin: 2.5em 0 .5em; text-transform: uppercase } .w3_agile_services_grid p { color: var(--gray02); line-height: 2em } .column div { position: relative; padding: 0 } .agile_services_grid figure { margin: 0; padding: 0; overflow: hidden } .hover06 figure img { -ms-transform: rotate(15deg) scale(1.4); -o-transform: rotate(15deg) scale(1.4); -moz-transform: rotate(15deg) scale(1.4); -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out } .hover06 figure:hover img, .w3_agile_services_grid:hover .hover06 figure img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -moz-transform: rotate(0) scale(1); -o-transform: rotate(0) scale(1); -ms-transform: rotate(0) scale(1) } .fea-tp { margin-top: 5em } .w3ls_service_grids { margin-top: 4em } .w3_agile_services_grid { margin-bottom: 2em } .wthree_banner1_info { margin: 8em 0 0; text-align: right } .wthree_banner1_info h3 { font-size: 2em; color: var(--white) } .wthree_banner1_info h3 span { color: #0a0a0a } .agileinfo_courses_flipster { width: 70%; margin: 0 auto } .w3ls_courses_left { padding: 0 !important } .w3ls_courses_left_grid h3 { font-size: 1.3em; color: #0a0a0a; text-transform: capitalize; font-weight: 600; letter-spacing: 2px } .w3ls_courses_left_grid h3 i { color: var(--gray04); padding-right: 1em } .w3ls_courses_left_grid p { margin: 1.5em 0 0; color: var(--gray02); line-height: 2em } .w3ls_courses_left_grid { padding-top: 2em } .w3ls_courses_right p { margin-bottom: 2em !important } .agileits_courses_right img { margin: 0 auto } .agileits_w3layouts_team_grids.w3ls_courses_grids { margin-top: 5em } .agileits_courses_right { padding-right: 0 } body .bar_group__bar.thick::before, body .bar_group__bar.thin::before { display: block; content: ''; position: absolute; z-index: -1 } body .bar_group__bar.thin::before { width: 100%; height: 30px; background: var(--gray01) } body .bar_group__bar.thin { width: 0%; height: 30px; background: #0a0a0a; margin-bottom: 20px; -webkit-transition: width 1s; transition: width 1s } .w3ls_bar_group__bar_pos p { font-size: 1em; color: var(--white); text-align: right; padding: .25em 1em 0 0 } .bar_group { position: relative; z-index: 1 } body .bar_group__bar.thin:last-child { margin-bottom: 0 } p.b_label { font-size: 1em; text-transform: uppercase; color: var(--gray04); margin-bottom: .8em; font-weight: 600 } .w3l_stats_bottom_grid_right { margin: 0 0 0; padding-right: 0 } .team { margin-top: 5em } .agileits_w3layouts_team_grids { margin-top: 5em } .w3layouts_news_grid { overflow: hidden; position: relative } .w3layouts_news_grid_pos { opacity: 0; position: absolute; top: 0; left: 0; bottom: 0; background-color: var(--gray03); right: 0; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease } .w3layouts_news_grid_pos { -webkit-transform: scale3d(0, 0, 1); -moz-transform: scale3d(0, 0, 1); -ms-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1) } .w3_agileits_team_grid:hover .w3layouts_news_grid .w3layouts_news_grid_pos, .w3layouts_gallery_grid:hover .w3layouts_news_grid .w3layouts_news_grid_pos, .w3ls_news_grid:hover .w3layouts_news_grid .w3layouts_news_grid_pos { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } .w3_agileits_team_grid:hover .wthree_text, .w3layouts_gallery_grid:hover .wthree_text, .w3ls_news_grid:hover .wthree_text { opacity: 1; -webkit-transform: translateY(0) scale3d(1, 1, 1); -moz-transform: translateY(0) scale3d(1, 1, 1); -ms-transform: translateY(0) scale3d(1, 1, 1); transform: translateY(0) scale3d(1, 1, 1); -webkit-transition: transform .4s ease 380ms; -moz-transition: transform .4s ease 380ms; transition: transform .4s ease 380ms } .wthree_text { text-align: center; padding: 12em 0 0; opacity: 0; -webkit-transform: translateY(0) scale3d(0, 0, 1); -moz-transform: translateY(0) scale3d(0, 0, 1); -ms-transform: translateY(0) scale3d(0, 0, 1); transform: translateY(0) scale3d(0, 0, 1); -webkit-transition: transform .4s ease 280ms; -moz-transition: transform .4s ease 280ms; transition: transform .4s ease 280ms } .wthree_text h3 { color: var(--white); font-size: 2em } .welcome { margin-top: 5em } .w3ls_news_grids.w3_agileits_team_grids { margin-top: 5em } .w3_agileits_team_grid { margin-bottom: 2em; text-align: center } .w3_agileits_team_grid h4 { font-size: 1.3em; color: var(--gray04); margin: 1.5em 0 .5em; font-weight: 600 } .w3_agileits_team_grid p { color: var(--gray03); font-weight: 600 } .agileits_social_list li { display: inline-block; margin-right: 3em } .agileits_social_list li a { color: var(--white); text-align: center; display: inline-block; font-size: 1.2em } a.w3_agile_facebook:hover { color: var(--purple01) } a.agile_twitter:hover { color: var(--blue04) } a.w3_agile_dribble:hover { color: var(--pink01) } a.w3_agile_vimeo:hover { color: var(--blue04) } .agile_social_icons_banner { float: right; margin: 1.6em 2em 0 0 } .events { padding: 3em 0 3em 0 } .events-head { text-align: center; padding: 0 0 3em 0 } .events-head h2 { font-size: 3em; color: var(--purple01); margin: 0 0 .2em 0 } .events-top { padding: 0 0 5em 0 } .events-top h4 { font-size: 1.6em; color: var(--gray03); margin: 0 0 .8em 0 } .fea-left { padding-left: 0 } .fea-right h3 { font-size: 1.6em; color: var(--gray04); margin: 0 0 .8em 0; text-align: left; text-transform: capitalize; font-weight: 600 } .fea-right p { font-size: 14px; color: var(--gray03); line-height: 28px } .events-icon ul { padding: 0; list-style: none } nav.events { text-align: center } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #0a0a0a; border-color: #0a0a0a } .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { background-color: #0a0a0a; border-color: #0a0a0a; color: var(--white) } .agileits_w3layouts_work_grid1 { padding-top: 1em } .w3ls_work_grids { margin-top: 4em } .column .w3_agile_work_effect { position: relative } .hover14 figure { overflow: hidden; position: relative } .hover14 figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, var(--white01) 0, var(--white02) 100%); background: linear-gradient(to right, var(--white01) 0, var(--white02) 100%); -webkit-transform: skewX(-17deg); transform: skewX(-17deg) } .hover14 figure:hover::before { -webkit-animation: shine .95s; animation: shine .95s } .paperSwiper { display: none } .paperSwiper .swiper-slide img { width: 100%; height: auto } @-webkit-keyframes shine { 100% { left: 125% }} @keyframes shine { 100% { left: 125% }} .agileits_w3layouts_work_grid-1 { padding-right: 0 } .agileits_w3layouts_work_grid-1 { padding-left: 0 } .bs-example h2 { color: var(--gray02); text-transform: none; font-weight: 400; margin-bottom: 0 } .owl-photo .owl-nav { display: block; width: 100%; position: absolute; font-size: 50px; top: calc(50% - 60px); text-align: left } .owl-photo .owl-next { position: absolute; right: -12px } .owl-nav { text-align: center; -webkit-tap-highlight-color: var(--transparent); font-size: 2em } .owl-nav [class*=owl-] { outline: 0 } .owl-nav [class*=owl-]+[class*=owl-] { margin-left: 20px } .owl-nav [class*=owl-] span { font-family: FontAwesome; display: inline-block; color: var(--blue04) } .owl-prev span:before { content: "" } .owl-next span:before { content: '' } .owl-dots { text-align: center; -webkit-tap-highlight-color: var(--transparent) } .owl-dots .owl-dot { display: inline-block; zoom: 1 } .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: var(--gray02); display: block; -webkit-backface-visibility: visible; transition: opacity .2s ease; border-radius: 30px } .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #0a0a0a } .mobile-society-div { display: none; position: fixed; right: 20px; bottom: 50px; width: 48px; z-index: 999 } .mobile-society-div a img { width: 48px; margin: 5px 0 } .active_toggle_btn { overflow: hidden; } .active_toggle_btn .wrapper { overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-family: "Microsoft JhengHei", "微軟正黑體", Arial; line-height: 1.42857143; } h1 { font-size: 28px; font-weight: 900; text-align: center; } h2 { font-size: 24px; font-weight: 700; text-align: center; } h3 { font-size: 22px; font-weight: 500; } h4 { font-size: 18px; font-weight: 500; } h5 { font-size: 18px; } p { font-size: 18px; } footer h1 { font-size: 16px; } footer h2 { font-size: 15px; } footer h3 { font-size: 14px; } footer h4 { font-size: 13px; } footer h5 { font-size: 12px; } footer p { font-size: 12px; } img { max-width: 100%; height: auto; } .ImageGrid { display: flex; flex-wrap: wrap; } .ImageGrid a { display: block; float: left; width: calc(25% - 20px); padding: 10px; } .ImageGrid a img { width: 100%; max-width: 100% !important; height: auto !important; } .navbar-default .navbar-toggle { width: 32px; height: 30px; padding: 8px 5px; float: none; border-radius: 0; border: none; } .navbar-default .navbar-toggle:active, .navbar-default .navbar-toggle:focus { border: none; border-radius: 0; } .navbar-default .navbar-toggle { flex-direction: column; } #sidebar { left: -400px; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; display: block; } .body-active-menu #sidebar { display: block; z-index: 2; left: 0; } .body-active-menu .navbar-default .navbar-toggle .icon-bar:nth-child(3) { display: none; } .body-active-menu .navbar-default .navbar-toggle .icon-bar:nth-child(1) { transform: rotate(45deg); position: absolute; left: 5px; top: 12.5px; } .body-active-menu .navbar-default .navbar-toggle .icon-bar:nth-child(2) { transform: rotate(135deg); position: absolute; left: 5px; top: 8.5px; } .scroll .top-strip { padding: 0; } .scroll .navbar-default .navbar-nav>li>a { padding-top: 8px; padding-bottom: 8px; } .scroll .navbar.navbar-default { min-height: auto; } .scroll .wrapper { height: calc(100% - 118px); } .fancybox-active .fancybox-thumbs { background: rgba(0, 0, 0, 0.3); } .swiper-wrapper { height: fit-content; } .swiper-container .swiper-slide { text-align: center; height: fit-content; } .swiper-container .swiper-slide picture{ width: 100%; } .swiper-container .swiper-button-prev:after, .swiper-container .swiper-button-next:after { color: #B30E0E; font-weight: 900; } .swiper-container .swiper-pagination { position: relative; text-align: center; bottom: 0; margin-top: 10px; } .swiper-container .swiper-pagination .swiper-pagination-bullet { opacity: 1; } .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #B30E0E; ; } .main-slider { position: relative; max-height: 60vw; } .main-slider .swiper-wrapper .swiper-slide a { display: flex; } .main-slider .swiper-wrapper .swiper-slide img { width: 100%; } .main-slider .video-outer{ position: relative; width: 100%; height: 500px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; } .main-slider .video-outer video{ position: absolute; width: 150vw; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: cover; background-repeat: no-repeat; background-position: center; object-fit: cover;  } .ImageGrid-mobile { display: none; } .pagination-div { padding: 15px 0 50px 0; text-align: center; } .pagination-div a { display: inline-block; background-color: #fff; color: #0a0a0a; padding: 3px 15px; margin: 5px 15px; border: 1px solid #0a0a0a; } .pagination-div a:hover { background-color: #0a0a0a; text-decoration: none; color: #fff; } #home-car-glass .glass-outer { position: relative; max-height: 200px; } .breadcrumb-path { margin-top: 15px; color: #0a0a0a; font-size: 14px; } .breadcrumb-path a { color: #0a0a0a; } .breadcrumb-path .container{ position: relative; } .breadcrumb-path .container a:first-child{ margin-left: 38px; } .breadcrumb-path .container:before{ content: ''; position: absolute; left: 30px; top: 2px; width: 16px; height: 16px; background-image:var(--cms-bg-ca5e1a7a8c3a,url("/images/icons/icon_home.webp")); background-position: center; background-repeat: no-repeat; background-size: 100% auto; } .home_case_list { padding: 100px 0; background-image:var(--cms-bg-8d833846a106,url("/images/backgrounds/seo01.webp")); background-position: center top; background-repeat: repeat-y; background-size: 100% auto; } .home_case_list img { max-width: 100%; } .home_case_list img { margin: 10px 0; } .home_open_time { padding: 100px 0; background-image:var(--cms-bg-16127255912a,url("/images/backgrounds/seo02.webp")); background-position: center; background-repeat: no-repeat; background-size: cover; } .home_open_time img { max-width: 100%; } #sidebar a[aria-expanded="false"]::before, #sidebar a[aria-expanded="false"]::before { content: ''; display: block; position: absolute; right: 20px; font-family: 'Glyphicons Halflings'; font-size: 0.6em; width: 20px; height: 20px; color: #282a2b; } #sidebar a[aria-expanded="true"]::after, #sidebar a[aria-expanded="false"]::after { content: ''; width: 20px; height: 20px; font-family: 'Glyphicons Halflings'; display: inline-block; position: absolute; top: 18px; right: 16px; background-image: none; background-position: center; background-repeat: no-repeat; background-size: 12px auto; } #sidebar a.open::after, #sidebar a.open::after { transform: rotate(90deg); } .section_news_list .filtr-container .dates li .more { text-align: right; } .section_news_list .filtr-container .dates li .more a { padding: 5px 10px; background: var(--gray03); color: var(--white); text-decoration: none; border-radius: 8px; font-style: normal; } .section_services_list .filtr-container { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; } .section_services_list .filtr-container .filtr-item { width: calc(100% / 4); padding: 15px; } .section_case_list .filtr-container .filtr-item .gallery-box { height: auto; padding-bottom: 0; } .section_case_list .filtr-container .filtr-item .gallery-box img { position: relative; } .section_case_list .filtr-container { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; } .section_case_list .filtr-container .filtr-item { width: calc(100% / 4); padding: 15px; } .section_comparison_list .filtr-container { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; } .section_comparison_list .filtr-container .filtr-item { width: calc(100% / 4); padding: 15px; } .section_portfolio_list .filtr-container { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; } .section_portfolio_list .filtr-container .filtr-item { width: calc(100% / 4); padding: 15px; } .section_portfolio_list .filtr-container .filtr-item .info h2 { font-size: 18px; text-align: center; } .section_portfolio_list .filtr-container .filtr-item .info p { display: none; } .breadcrumb-path { padding: 15px 0; } .visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap;} @media (min-width: 768px) { .filtr-container .filtr-item { width: calc(100% / 4); }} @media(max-width:1240px) { header { padding: 4px 0 } header .container { width: 100%; justify-content: flex-end; transition: .5s all } .wrapper { padding-top: 0px; margin-top: 58px; } .js-close-any-slidebar header .container { width: calc(100% - 255px); margin-left: 0 } header .container .logo { width: 200px } header .container .logo img { max-height: 50px; max-width: 200px; } header .container .navbar.navbar-default { width: calc(100% - 200px) } #bs-example-navbar-collapse-1 { display: none } .navbar-collapse.collapse { display: none !important } #sidebarCollapse { display: block } .navbar-default .navbar-toggle { display: block; margin: 10px 0px 0 0; background-color: #C5212A; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {  background-color: #C5212A; } .js-close-any-slidebar .navbar-toggle { margin: 10px 0 0 0 } #sidebar .navbar-nav>li { display: block } #home-car-glass .owl-car-glass .owl-nav .owl-prev { left: 0 } #home-car-glass .owl-car-glass .owl-nav .owl-next { right: 0 } .mobile-society-div { display: inline-block }} @media(max-width:1140px) { .cb-slideshow li div h3 { font-size: 100px }} @media(max-width:1080px) { .icon-box { width: 33.33% } .single-left1 h3 { margin: 1em 0 1em; letter-spacing: 1px; font-size: 1.3em } .admin { margin: 2em 0 } .leave-coment-form input[type=email], .leave-coment-form input[type=text], .leave-coment-form textarea { width: 48.56% } .navbar-default .navbar-nav>li>a { padding: 15px 9px } .navbar-default .navbar-collapse, .navbar-default .navbar-form { width: 95% } .wthreesearch input[type=search] { width: 82% } .w3ls-social-1 i, .w3ls-social-icons-1 i { font-size: 11px; padding: 8px 8px } .w3agile-middle { width: 60% } .agileits_w3layouts_classes_grid1_right { width: 70px; height: 70px; border-radius: 70px } .agileits_w3layouts_classes_grid1_right i { line-height: 2.5em; font-size: 2em } .wthree_text { padding: 10em 0 0 }} @media(max-width:992px) { h3.agileits-icons-title { font-size: 28px } h3.icon-subheading { font-size: 22px } .icon-box { width: 50% } .navbar-default .navbar-nav>li>a { padding: 15px 4px } .navbar-default .navbar-collapse, .navbar-default .navbar-form { width: 93% } .wthreesearch input[type=search] { width: 94% } .w3agile-middle { width: 72%; padding: 13px } .w3agile-left { padding-left: 32px } .w3agile-right h3 { padding-top: 20px } .w3agile-middle ul li a { font-size: 13px } .agile-top iframe { min-height: 382px } .w3-rgt { float: left; width: 100%; padding-left: 0; padding-right: 16px } .w3-rgt-top { float: left; width: 48%; margin-top: 1em; margin-right: 13px } .w3-rgt-top1 { margin-top: 1em; float: left; width: 50% } .w3agile_blog_left { padding-right: 16px; float: right; width: 100%; margin-top: 2em } .w3agile-list ul li { margin: 0 1em } .w3_agile_classes_grid { padding-top: 3em; float: left; width: 50% } .w3_agile_services_grid { float: left; width: 50% } .agileits_w3layouts_work_grid { float: left; width: 50% } .agileits_w3layouts_work_grid-1 { float: left; width: 50% } .fea-left { float: left; width: 50% } .wthree.fea-right { float: left; width: 50% } .events { padding: 1em 0 0 0 } .events-top { padding: 4em 0 0 0 } .w3-lft-3 { float: left; width: 50%; padding-left: 0 } .w3-rgt-3 { float: left; width: 50%; padding-right: 0 } .agileits_courses_right { margin-top: 2em } .w3l_stats_bottom_grid_right { margin: 2em 0 0 } .w3_agileits_team_grid { float: left; width: 50% } .single-left2-left { float: left; width: 50% } .leave-coment-form input[type=email], .leave-coment-form input[type=text], .leave-coment-form textarea { width: 48.75% } #home-service-address .map-div .item { width: calc(100%/1 - 2px); margin: 20px 0 }} @media(max-width:991px) { .grid_3.grid_5.w3l, .grid_3.grid_5.wthree { margin-bottom: 0; padding-bottom: 0 } .grid_3.grid_5.agileits { padding: 0 }} @media (max-width:940px) { .ImageGrid a { width: 50% !important; } .main-slider { max-height: 185vw; }} @media(max-width:768px) { h3.agileits-icons-title { font-size: 28px } h3.icon-subheading { font-size: 25px } .row { margin-right: 0; margin-left: 0 } .icon-box { margin: 0 } .owl-photo div.item { display: block; width: 100%; margin: 20px 0 } ul.dates .date strong { display: block; padding-left: .5em } ul.dates .img { display: none } .section_head h3 { font-size: 30px; padding-bottom: 2em; letter-spacing: 0 } .section_head h2 { font-size: 30px; padding-bottom: 2em; letter-spacing: 0 } .simplefilter li { padding: 6px 10px; letter-spacing: 0; margin: 0 .1em 1em; font-size: 12px } .simplefilter li:first-child { margin-left: 0 } .simplefilter li:last-child { margin-right: 0 } .gallery-box .mask { font-size: 1em; font-weight: 600; letter-spacing: 2px } .gallery-box:hover .mask { animation: fadeIn .4s ease-in both } .navbar-default .navbar-nav .open .dropdown-menu>li>a { color: var(--gray04) } .dropdown-menu>li>a { text-align: center } .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { color: #0a0a0a; background-color: var(--white) } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-nav>li { display: block } .navbar-default .navbar-nav>li>a { font-size: 14px; padding: 10px 15.6px } .w3-rgt-top1 { width: 49.9% } .w3agile-list ul li { margin: 0 .5em } .features { width: 90%; align-items: center } .navbar-default .navbar-nav>li>a { font-size: 12px } .owl-list .img_grid { width: calc(100% / 2 - 20px); } #home-car-glass .owl-car-glass .owl-nav { display: none } .grid_5 { padding: 0 0 1em } .grid_3 { margin-bottom: 0 } .wrapper {  height: 100%; } .scroll .wrapper { height: calc(100% - 123px); } .top-strip { padding: 0; } #sidebar[data-off-canvas*=left] {   padding-top: 77.2px; padding-right: 0%; height: 100%; top: 0; background-color: #FBF8F9; } .active_toggle_btn .navbar-default .navbar-toggle .icon-bar:nth-child(1) { transform: rotate(-45deg); position: absolute; top: 13px; } .active_toggle_btn .navbar-default .navbar-toggle .icon-bar:nth-child(2) { transform: rotate(-135deg); position: absolute; top: 9px; } .active_toggle_btn .navbar-default .navbar-toggle .icon-bar:nth-child(3) { display: none; } .fancybox-active .fancybox-thumbs { top: auto; width: auto; bottom: 0; left: 0; right: 0; height: 95px; padding: 10px 10px 5px 10px; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); } .fancybox-active .fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 95px; } #sidebar.active { margin-left: 0 } #pageContent.active { right: -250px; position: fixed; top: 0 } .section_news_list .filtr-container .dates li .img { display: block; width: 100%; height: auto; } .section_services_list .filtr-container .filtr-item { width: calc(100% / 2); }} @media(max-width:736px) { .icon-box { float: left }} @media(max-width:667px) { .w3-rgt-top1 { width: 49.5% } .leave-coment-form input[type=email], .leave-coment-form input[type=text], .leave-coment-form textarea { width: 48.6% } .wthreesearch input[type=search] { width: 93% } .features { width: 100% }} @media(max-width:640px) { .icon-box { float: left; width: 50% } h3.icon-subheading { font-size: 22px } .single-left1 h3 { font-size: 1.2em } .leave-coment-form input[type=email], .leave-coment-form input[type=text], .leave-coment-form textarea { width: 48.4% } section { margin: 3em 0 } .agile-top iframe { min-height: 325px } .agile-banner { min-height: 180px } .banner-bottom { padding: 3em 0 } .w3_agile_classes_grid { float: left; width: 100% } .fea-right h3 { margin: 0 0 .5em 0 } .agileits_w3layouts_team_grids.w3ls_courses_grids { margin-top: 2em } .team { margin-top: 3em } .agileits_w3layouts_team_grids { margin-top: 3em } .welcome { margin-top: 3em } .w3ls_news_grids.w3_agileits_team_grids { margin-top: 3em } .wthree_text { padding: 9em 0 0 } .agileits_social_list li { margin-right: 2em } .w3ls_work_grids { margin-top: 2em } .owl-paper { display: none !important } .paperSwiper { display: block } .owl-list a p {  font-size: 0.9em; letter-spacing: 0 } .owl-list .img_grid { width: calc(100%/1); } .owl-list .img_grid .img_grid a { width: 100%; } .h1, .h2, .h3, h1, h2, h3 { margin-top: 0; margin-bottom: 0 } .grid_5 h1, .grid_5 h2, .grid_5 h3, .grid_5 h4, .grid_5 h5, h3.bars, h3.hdg { margin-bottom: .5em } .progress { height: 10px; margin-bottom: 10px } .grid_3 p, li.list-group-item1, ol.breadcrumb li, ul.list-group li { font-size: 14px } .breadcrumb { margin-bottom: 25px } .well { font-size: 14px; margin-bottom: 10px } h2.typoh2 { font-size: 1.5em } .label { font-size: 60% } .in-gp-tl { padding: 0 1em } .in-gp-tb { padding-right: 1em } .grid_3.grid_5.w3l { padding: 1.5em 0 } .filtr-item {  width: calc(100% / 2 - 30px); } .ImageGrid-web { display: none; } .ImageGrid-mobile { display: block; } .section_case_list .filtr-container .filtr-item { width: calc(100% / 2); } .section_comparison_list .filtr-container .filtr-item { width: calc(100% / 2); } .section_portfolio_list .filtr-container .filtr-item { width: calc(100% / 2); }} @media(max-width:600px) { .w3-rgt-top1 { width: 49.4% } .agile-top iframe { min-height: 303px } .fea-left { width: 100% } .wthree.fea-right { width: 100%; padding: 0; margin-top: 1.5em } .events-top { padding: 3em 0 0 0 } .fea-left { width: 100%; padding: 0; margin-top: 1.5em } .fea-right { width: 100%; padding: 0; margin-top: 1.5em } .wthreesearch input[type=search] { width: 92% } .wthree_text { padding: 7em 0 0 } .cb-slideshow li div h3 { font-size: 50px }} @media(max-width:568px) { .w3-rgt-top1 { width: 49.2% } .leave-coment-form input[type=email], .leave-coment-form input[type=text], .leave-coment-form textarea { width: 48.3% } .js-close-any-slidebar .top-strip { display: none } .js-close-any-slidebar .navbar-toggle { margin-right: 10px } .skdslider { height: 40vw }} @media(max-width:480px) { .grid_5 h1, .grid_5 h2, .grid_5 h3, .grid_5 h4, .grid_5 h5, h3.bars, h3.hdg { font-size: 1.2em } .table h1 { font-size: 26px } .table h2 { font-size: 23px } .table h3 { font-size: 20px } .label { font-size: 53% } .alert, p { font-size: 18px } .pagination { margin: 20px 0 0 } .grid_3.grid_4.w3layouts { margin-top: 0 } .grid_3.grid_5.agileinfo { padding: 1.5em 0 } #home-car-glass .remark p span { display: inline } .bs-glyphicons li { width: 31% } .icon-box { float: none; width: 100% } #about-intro .container>div, #home-intro .container>div { border: 1px solid var(--gray01); border-radius: 5px } .features { flex-direction: column } .features article:nth-child(2n) { margin-left: 0 } .features article:nth-last-child(2) { margin-bottom: 38px } #about-intro .section_head h3 { padding: .8em } .single-left { padding: 0 } .single-left1 h3 { font-size: 1.1em; letter-spacing: 0 } .single-left2-left { float: none; width: 100% } .comments-grid-right h4 a { font-size: .8em } .comments-grid-left { width: 20% } .leave-coment-form input[type=email], .leave-coment-form input[type=text], .leave-coment-form textarea { width: 100% } .leave-coment-form input[type=email] { margin: 1em 0 0 } .leave-coment-form input[type=submit] { width: 100% } .leave-coment-form, .leave-coment-form form { margin: 2em 0 0 } .agileits_map iframe { min-height: 250px } .w3agile-middle { width: 88%; padding: 13px } .w3agile-right h3 { font-size: 20px; padding-top: 12px } .w3agile-left h5 { font-size: 18px } .w3agile-right p { margin: 16px 0 } .agile-top iframe { min-height: 234px } .w3-rgt-top { width: 100%; margin-top: 1em; margin-right: 0 } .w3-rgt-top1 { width: 100% } .w3agile-list ul li { margin: 0 .5em .2em } .w3agile-list ul li a { font-size: 16px } .agileinfo p { font-size: 15px; line-height: 28px } .wthree_head { font-size: 2em } .agile-banner { min-height: 150px } .breadcrumbs { padding: 1em 0 } .agile-map { margin: 3em 0 } .w3_agile_services_grid { width: 100% } .events-top { padding: 1em 0 0 0 } .wthreesearch input[type=search] { width: 90% } .wthree_text { padding: 5em 0 0 } .container>.col-md-12 { padding-right: 0; padding-left: 0 } .section_head h3 { padding-bottom: 30px; } .section_head h2 { padding-bottom: 30px; } .swiper-container .swiper-button-prev:after, .swiper-container .swiper-button-next:after { font-size: 28px; } #abgne_float_ad { bottom: 0; left: 0; width: 100%; display: flex !important; flex-wrap: wrap; border-radius: 0; background-color: rgba(255,255,255,0.95); border-top: 1px solid #e7e7e7; padding: 5px 0; } #abgne_float_ad a { flex: 1; width: 48px; height: 48px; } #abgne_float_ad img { height: 48px; width: auto; } .active_toggle_btn header { background-color: #FBF8F9; }} @media(max-width:414px) { .single-left1 h3 { font-size: 1em } .single-left1 ul li { margin-right: 1em } .admin { padding: 1em } .logo a { font-size: 32px } .w3agile-middle { width: 100%; padding: 10px } .w3agile-middle ul li { margin-right: 16px } .w3agile-right h3 { font-size: 18px } .agile-top iframe { min-height: 198px } .agile-map iframe { min-height: 220px } .w3_agile_classes_grid { width: 100%; padding: 2em 0 0 } .fea-tp { margin-top: 3em } .w3ls_service_grids { margin-top: 3em } .fea-right h3 { font-size: 1.4em } .w3-lft-3 { width: 100%; padding-left: 0; padding: 0; margin-bottom: 1.5em } .w3-rgt-3 { width: 100%; padding-right: 0; padding: 0 } .wthreesearch input[type=search] { width: 88% } .agile-banner { min-height: 130px } .w3ls_courses_left_grid h3 i { padding-right: .5em } .agileits_courses_right { padding: 0 } .w3_agileits_team_grid { width: 100% } .wthree_text { padding: 10em 0 0 } h3.agileits-icons-title { font-size: 23px } h3.icon-subheading { font-size: 18px } .bs-glyphicons li { width: 31.33% } .agileits_portfolio_grid a h2 { font-size: 16px; letter-spacing: 3px } .wrapper { padding-top: 0px }} @media(max-width:384px) { .single-left1 ul li span { padding-right: .5em } .w3agile-middle ul li { margin-right: 6px } .wthreesearch input[type=search] { width: 87% } .icon-box { float: none; width: 100% } .agileits_portfolio_grid a h2 { font-size: 14px; letter-spacing: 3px }} @media(max-width:375px) { .w3_agileits_icons_page { margin: 25px 0 0 !important } .admin a { margin: 1em 0 0 } .w3agile-middle i { padding-right: 5px } .agileits_portfolio_grid a h2 { font-size: 14px; letter-spacing: 0 }} @media(max-width:320px) { .comments-grid-right p, ol li, p, ul li { font-size: 13px } .single-left1 ul li { margin-right: .4em } .single-left1 p { margin: 1em 0 } .single-left2-left { padding: 0 } .admin { margin: 1em 0 2em } .admin p { padding-left: 3em } .comments-grids { margin: 2em 0 0 } .comments-grid-left { width: 30% } .comments-grid-right { width: 65% } .comments-grid-right ul li i { margin: 0 .4em } .top-strip { padding: 14px 0 } .logo a { font-size: 27px } .logo p { font-size: 11px } .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { width: 83% } .w3agile-middle ul li a { font-size: 13px } .w3agile-middle i { padding-right: 4px } .w3agile-middle ul li { margin-right: 3px } .w3agile-middle { padding: 10px 4px } .w3agile-right { padding-left: 16px } .w3agile-right h3 { font-size: 16px } .w3agile-left h5 { font-size: 17px } .w3agile-left { padding-left: 16px } .w3agile-bottom { padding: 18px 0 } a.agileits.w3layouts { padding: 8px 16px; font-size: 14px } .w3agile-right p { font-size: 13px } .w3-lft { padding: 0 } .w3-rgt { padding-right: 0 } .w3agile_blog_left { padding: 0; margin-top: 25px } .wthreesearch { margin-bottom: 2em } .w3ls_popular_posts { margin-top: 2em } .w3l_categories { margin-top: 2em } .agile_author, .w3ls_recent_posts { margin: 2em 0 } .agileinfo p { font-size: 13px; margin: 1em 0 0 0 } .wthreesearch input[type=search] { width: 85% } .banner-bottom { padding: 2em 0 } .agile-map { margin: 2em 0 } .input_box_grid { padding: 0 } .input_box_grid textarea { min-height: 180px } section { margin: 2em 0 } .agile_classes_grid1 { margin-top: 20px } .agile_classes_grid1_left h4 { font-size: 1.3em } .events-top { padding: 0 } .fea-right p { font-size: 13px } .agile-banner { min-height: 100px } .breadcrumbs { padding: .8em 0 } .agileits_w3layouts_team_grids.w3ls_courses_grids { margin-top: 1em } .agileits_w3layouts_team_grids { margin-top: 2em } .w3l_stats_bottom_grid_left { padding: 0 } .w3l_stats_bottom_grid_right { padding: 0 } .w3ls_news_grids.w3_agileits_team_grids { margin-top: 2em } .w3_agileits_team_grid { padding: 0 } .w3ls_work_grids { margin-top: 1em } .grid_4 { margin-top: 18px } h3.title { font-size: 1.6em } .alert, .grid_3 p, .well, a.list-group-item, li.list-group-item1, ol.breadcrumb li, p, ul.list-group li { font-size: 13px } .alert { padding: 10px; margin-bottom: 10px } ul.pagination li a { font-size: 14px; padding: 5px 11px } .list-group { margin-bottom: 10px } .well { padding: 10px } .nav>li>a { font-size: 14px } .bs-docs-example, .table-bordered, table.table.table-striped { display: none }} .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; } .home-customize-section{ margin: 0;  padding: 0; background-color: #fff; } .home-customize-section .container{ width: 100%; padding: 0; } .home-customize-section .container .col-md-12{ padding: 0; float: none; } .home-customize-section .container .col-md-12 .row{ max-width: 1200px; margin: 0 auto; padding: 0 15px; } .customize-div { padding: 0; position: relative; margin: 0; } .customize-div.right-img-left-txt-background-image{ background-image:var(--cms-bg-4f22a84e997b,url("/images/backgrounds/customize_bg.webp")); background-position: center; background-repeat: no-repeat; background-size: cover; } .customize-div .col-md-8 img { width: 100% } .customize-div .col-md-6 img { width: 100% } .customize-div .col-md-4 img { width: 100%; max-width: 100%; height: auto; } @media (max-width:768px) { .home-customize-section{ background-size: 50% auto; padding: 50px 0; }} .client{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .client .img{ width: 250px; } .client .img img{ overflow: hidden; max-width: 100%; border-radius: 200px; } .client .info{ width: calc(100% - 250px - 20px); padding-left: 20px; text-align: left; color: #fff; } .client .info h3{ font-size: 1.5em; font-weight: 700; } .client .info p{ font-size: 1em; } .ad-list{ display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } .ad-list .item{ width: calc(100% / 6 - 20px); text-align: center; margin: 10px; } .ad-list .item img{ max-width: 100px; max-height: 100px; } .ad-list .item article{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .ad-list .item a{ display: flex; text-align: center; padding: 8px; border-radius: 5px; width: 116px; height: 116px; line-height: 100px; border: 1px solid transparent; transition: 0.2s ease-in-out; } .ad-list .item a:hover{ border: 1px solid #e6e6e6; background-color: #fff; } @media(max-width:992px) { .ad-list .item { width: calc(100% / 4 - 20px); }} @media(max-width:768px) { #home-services,#home-news,#home-noname,section,.home_case_list{ padding: 50px 0; } .client{ display: block; } .client .img{ width: 100%; } .client .info{ width: 100%; padding-left:0; }} @media(max-width:640px) { #home-services,#home-news,#home-noname,section,.home_case_list,#home-client-testimonials{ padding: 30px 0; } .ad-list .item { margin: 5px; width: calc(100% / 3 - 10px); }}